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); }); });