There is too much data on the X-axis, and the display is not fully set
xAxis: [
{
type: 'category',
axisLabel:{
interval: 0,//The horizontal axis information is all displayed
rotate: -30 //-30 degree angle tilt display
},
Set the maximum value and unit of the Y coordinate
yAxis : [
{
name: 'Flow(m^3/s)',
type: 'value',
max: 500,
axisLabel : {
show:true,
interval: 'auto', // {number}
rotate: -45,
margin: 18,
formatter: '{value} ml' //unit
},
Add a unit to the data: Display the relevant label or tooltip supports formatter, such as the value axis, you can do conversion control through axisLabel.formatter of axis, support function
1 decimal place for Y axis
yAxis : [
{
type : 'value',
axisLabel: {
formatter: function (value, index) {
return value.toFixed(1);
}
}
}
],
Mouseover data tip with units
tooltip: {
trigger: 'axis',
formatter: "Income and Expenditure Statistics: <br/>{b} : {c}Million"
},
Histogram data with upper unit
series: [
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '￥{c}'
}
}
},
Histogram change color
name: 'Total hours',
type: 'bar',
itemStyle: {
normal: {
color: '#00bfff',
label : {
show: true,
position: 'top',
textStyle: {
color: '#00bfff'
}
}
}
},
China map echart3.js
var option = {
timeline: {
data: [
'2002-01-01','2003-01-01','2004-01-01',
{
value: '2005-01-01',
tooltip: {
formatter: '{b} GDP reaches a height'
},
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 // leave a position for the date axis
},
options: [
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['cumulative turnover']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['high', 'low'], // text, default is numeric text
calculable: true
},
series: [
{
name: 'Cumulative turnover',
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); //name of province
});
});
echart2 makes a map of China, click the corresponding province and city link to the detailed introduction of the province
require(['echarts', 'echarts/chart/map'], function (charts) {
var myChart = charts.init(document.getElementById('chart_div'));
var option = {
title: {
text: '34 provinces, municipalities and autonomous regions across the country',
subtext: 'Map of China (click to switch)'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'right',
data: ['random data']
},
dataRange: {
min: 0,
max: 1000,
text: ['high', 'low'], // text, default is numeric text
calculable: true
},
series: [
{
name: 'Random data',
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: 'Heilongjiang', 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') { //After the city is clicked
option.series[0].mapType = 'china';
option.title.subtext = 'China map (click to switch)';
myChart.setOption(option, true);
return;
}
option.series[0].mapType = selectedProvince;
//According to provincial dynamic data
option.series[0].data.push(
{name: 'Jingmen City', value: Math.round(Math.random() * 1000)},
{name: 'Xianning City', 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: 'Yellowstone', value: Math.round(Math.random() * 1000)},
{name: 'Shennongjia Forest Area', value: Math.round(Math.random() * 1000)},
{name: '天门市', value: Math.round(Math.random() * 1000)},
{name: 'Xantao City', value: Math.round(Math.random() * 1000)},
{name: '潜江市', value: Math.round(Math.random() * 1000)},
{name: '鄂州市', value: Math.round(Math.random() * 1000)},
{name: 'Yichang City', value: Math.round(Math.random() * 1000)}
);
option.title.subtext = selectedProvince + '(click to toggle)';
myChart.setOption(option, true);
});
});