X軸資料太多，顯示不全設定
xAxis: [
{
type: 'category',
axisLabel:{
interval:0,//橫軸資訊全部顯示
rotate: -30 //-30度角傾斜顯示
},設定Y座標的最大值和單位
yAxis : [
{
name: '流量(m^3/s)',
type: 'value',
max: 500,
axisLabel : {
show:true,
interval: 'auto', // {number}
rotate: -45,
margin: 18,
formatter: '{value} ml' //單位
},資料加個單位：顯示相關的label或tooltip都支援formatter，如數值軸你就可以通過axis的axisLabel.formatter做換算控制，支援function
Y軸保留1位小數
yAxis : [
{
type : 'value',
axisLabel: {
formatter: function (value, index) {
return value.toFixed(1);
}
}
}
],滑鼠懸停資料提示帶單位
tooltip: {
trigger: 'axis',
formatter: "收支統計 : <br/>{b} : {c}萬"
},series: [
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '￥{c}'
}
}
},
柱狀圖修改顏色
name: '合計工時',
type: 'bar',
itemStyle: {
normal: {
color: '#00bfff',
label : {
show: true,
position: 'top',
textStyle: {
color: '#00bfff'
}
}
}
},中國地圖echart3.js
var option = {
timeline: {
data: [
'2002-01-01','2003-01-01','2004-01-01',
{
value: '2005-01-01',
tooltip: {
formatter: '{b} GDP達到一個高度'
},
symbol: 'diamond',
symbolSize: 16
},
'2006-01-01'
],
label: {
formatter: function (s) {
var date = new Date(s);
var month = date.getMonth() + 1;
return date.getFullYear() + "-" + (month > 9 ? month : '0' + month);
}
},
// autoPlay : true,
playInterval: 1000,
symbolSize: 15,
width: '750'
},
grid: {
bottom: 100 //留位置給日期軸
},
options: [
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['累計成交額']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文字，預設為數值文字
calculable: true
},
series: [
{
name: '累計成交額',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
'data': dataMap.dataGDP['2002']
}
]
},
// {
// series : [
// {'data': dataMap.dataGDP['2003']}
// ]
// }
]
};
$.get('__PUBLIC__/js/plugins/visualization/echarts/map/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var myChart = echarts.init(document.getElementById('chart_div'));
for (var year = 2003; year <= 2006; year++) {
option.options.push({
series : [
{'data': dataMap.dataGDP[year]}
]
});
}
myChart.setOption(option);
myChart.on('mapselectchanged',function($params){
console.log($params.data.name); //省的名稱
});
});echart2製作中國地圖,點選對應的省市連結到該省份的詳細介紹
require(['echarts', 'echarts/chart/map'], function (charts) {
var myChart = charts.init(document.getElementById('chart_div'));
var option = {
title: {
text: '全國34個省市自治區',
subtext: '中國地圖（點選切換）'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'right',
data: ['隨機資料']
},
dataRange: {
min: 0,
max: 1000,
text: ['高', '低'], // 文字，預設為數值文字
calculable: true
},
series: [
{
name: '隨機資料',
type: 'map',
mapType: 'china',
selectedMode: 'single',
roam: true,
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '天津', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
{name: '重慶', value: Math.round(Math.random() * 1000)},
{name: '河北', value: Math.round(Math.random() * 1000)},
{name: '河南', value: Math.round(Math.random() * 1000)},
{name: '雲南', value: Math.round(Math.random() * 1000)},
{name: '遼寧', value: Math.round(Math.random() * 1000)},
{name: '黑龍江', value: Math.round(Math.random() * 1000)},
{name: '湖南', value: Math.round(Math.random() * 1000)},
{name: '安徽', value: Math.round(Math.random() * 1000)},
{name: '山東', value: Math.round(Math.random() * 1000)},
{name: '新疆', value: Math.round(Math.random() * 1000)},
{name: '江蘇', value: Math.round(Math.random() * 1000)},
{name: '浙江', value: Math.round(Math.random() * 1000)},
{name: '江西', value: Math.round(Math.random() * 1000)},
{name: '湖北', value: Math.round(Math.random() * 1000)},
{name: '廣西', value: Math.round(Math.random() * 1000)},
{name: '甘肅', value: Math.round(Math.random() * 1000)},
{name: '山西', value: Math.round(Math.random() * 1000)},
{name: '內蒙古', value: Math.round(Math.random() * 1000)},
{name: '陝西', value: Math.round(Math.random() * 1000)},
{name: '吉林', value: Math.round(Math.random() * 1000)},
{name: '福建', value: Math.round(Math.random() * 1000)},
{name: '貴州', value: Math.round(Math.random() * 1000)},
{name: '廣東', value: Math.round(Math.random() * 1000)},
{name: '青海', value: Math.round(Math.random() * 1000)},
{name: '西藏', value: Math.round(Math.random() * 1000)},
{name: '四川', value: Math.round(Math.random() * 1000)},
{name: '寧夏', value: Math.round(Math.random() * 1000)},
{name: '海南', value: Math.round(Math.random() * 1000)},
{name: '臺灣', value: Math.round(Math.random() * 1000)},
{name: '香港', value: Math.round(Math.random() * 1000)},
{name: '澳門', value: Math.round(Math.random() * 1000)}
]
}
]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
if (typeof selectedProvince == 'undefined') { //城市點選後
option.series[0].mapType = 'china';
option.title.subtext = '中國地圖（點選切換）';
myChart.setOption(option, true);
return;
}
option.series[0].mapType = selectedProvince;
//根據省取動態資料
option.series[0].data.push(
{name: '荊門市', value: Math.round(Math.random() * 1000)},
{name: '咸寧市', value: Math.round(Math.random() * 1000)},
{name: '隨州市', value: Math.round(Math.random() * 1000)},
{name: '孝感市', value: Math.round(Math.random() * 1000)},
{name: '武漢市', value: Math.round(Math.random() * 1000)},
{name: '黃石市', value: Math.round(Math.random() * 1000)},
{name: '神農架林區', value: Math.round(Math.random() * 1000)},
{name: '天門市', value: Math.round(Math.random() * 1000)},
{name: '仙桃市', value: Math.round(Math.random() * 1000)},
{name: '潛江市', value: Math.round(Math.random() * 1000)},
{name: '鄂州市', value: Math.round(Math.random() * 1000)},
{name: '宜昌市', value: Math.round(Math.random() * 1000)}
);
option.title.subtext = selectedProvince + ' （點選切換）';
myChart.setOption(option, true);
});
});