一次做一个项目, 设计图中的一块图表全是在一起的, 于是想把这些图表全部放在一个实例中算了. 不多说, 看配置
option={ color:['#86dad2','#00abea','#f5c801','#ef6007'], title: [ { text: '感知分布', textStyle: { color: 'rgb(16,70,200)', fontSize: 13, fontWeight: 'normal' }, left: '7%' }, { text: '用户分布', textStyle: { color: 'rgb(16,70,200)', fontSize: 13, fontWeight: 'normal' }, left: '39%' }, { text: '网络质量', textStyle: { color: 'rgb(16,70,200)', fontSize: 13, fontWeight: 'normal' }, top: '50%', left: '26%' } ], legend: [ { left: 0, top: '40%', align: 'auto', formatter: function (name) { // 这里的百分只能是直接从外部拿了 // 根据不同的name 获取其值 var total = 0; var target; for (var i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { target = data[i].value; } } return target + '% ' + name; }, data: ['优秀', '良好', '一般', '不好'] }, { left: '47%', top: '5%', data: [{ name: '图列', icon: 'circle' }], }, { left: '42%', top: '52%', formatter: function (name) { return name }, data: [ { name: 'IV', icon: 'circle' }, { name: 'V', icon: 'circle' } ], } ], grid: [ {top: '3%', left: '3%', '20%', height: '40%'}, {top: '9%', left: '24%', '34%', height: '36%'}, {top: '3%', left: '62%', '37%', height: '92%'}, {top: '58%', left: '3%', '53%', height: '37%'} ], geo: { map: '江西', top: '3%', left: '65%', bottom: '3%', right: '3%', emphasis:{ label:{ show:false, } }, regions: [ { name: '吉安市', itemStyle: { areaColor: 'rgb(142,193,250)', color: 'rgb(142,193,250)' } }, { name: '萍乡市', itemStyle: { areaColor: 'rgb(142,193,250)', color: 'rgb(142,193,250)' } }, { name: '抚州市', itemStyle: { areaColor: 'rgb(142,193,250)', color: 'rgb(142,193,250)' } }, { name: '南昌市', itemStyle: { areaColor: 'rgb(142,193,250)', color: 'rgb(142,193,250)' } }, { name: '鹰潭市', itemStyle: { areaColor: 'rgb(142,193,250)', color: 'rgb(142,193,250)' } }, { name: '宜春市', itemStyle: { areaColor: 'rgb(142,193,250)', color: 'rgb(142,193,250)' } }, { name: '赣州市', itemStyle: { areaColor: 'rgb(184,215,255)', color: 'rgb(184,215,255)' } }, { name: '上饶市', itemStyle: { areaColor: 'rgb(184,215,255)', color: 'rgb(184,215,255)' } }, { name: '九江市', itemStyle: { areaColor: 'rgb(218,219,239)', color: 'rgb(218,219,239)' } }, { name: '景德镇市', itemStyle: { areaColor: 'rgb(230,215,211)', color: 'rgb(230,215,211)' } }, { name: '新余市', itemStyle: { areaColor: 'rgb(253,205,162)', color: 'rgb(253,205,162)' } } ] }, tooltip: { // formatter: 'Group {a}: ({c})' }, xAxis: [ {gridIndex: 0, show: false}, { gridIndex: 1, axisLabel: { show: false }, axisTick: { show: false }, splitLine: { show: false }, data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'], }, {gridIndex: 2, show: false}, { gridIndex: 3, type: 'category', splitLine: { show: true }, data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], } ], yAxis: [ {gridIndex: 0, show: false}, { gridIndex: 1, type: "value", axisLabel: { show: false }, axisTick: { show: false }, splitLine: { show: false } }, {gridIndex: 2, show: false}, { gridIndex: 3, type: 'value', // name: '水量', min: 0, max: 200, interval: 50, }, { gridIndex: 3, type: 'value', // name: '温度', min: 0, max: 200, interval: 50, } ], series: [ { name: 'I', type: 'pie', radius: '28%', center: ['9%', '22%'], label: { normal: { position: 'inner', formatter: function (value) { return '{term|' + parseInt(value.percent) + '%}' + ' {fregment1|' + value.name + '}' }, rich: { term: { color: '#fff', fontSize: 15 }, fregment1: { color: '#fff', padding: 5, fontSize: 10 }, } } }, labelLine: { normal: { show: false } }, data: [ {value: 335, name: '优秀'}, {value: 310, name: '良好'}, {value: 234, name: '一般'}, {value: 135, name: '不好'}, ] // markLine: markLineOpt }, { name: '图列', type: 'bar', barWidth: '60%', xAxisIndex: 1, yAxisIndex: 1, itemStyle: { barBorderRadius: 10 }, label: { show: true, position: 'top', formatter: '{c}%' }, data: [30, 18, 16, 15, 14, 13, 12, 11, 10, 9, 8] }, { name: 'IV', type: 'bar', xAxisIndex: 3, yAxisIndex: 3, data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 50], // markLine: markLineOpt }, { name: 'IV', type: 'bar', xAxisIndex: 3, yAxisIndex: 3, data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 60] }, { name: 'V', type: 'line', xAxisIndex: 3, yAxisIndex: 4, symbolSize: 10, symbol: 'circle', smooth: true, data: [3.0, 4.2, 4.3, 5.5, 7.3, 11.2, 21.3, 26.4, 24.0, 18.5, 14.0, 7.2, 70] }, { name: '普通', type: 'scatter', coordinateSystem: 'geo', data: convertData(data1), encode: { value: 2 }, symbolSize: function (value) { return value[2] / 20 }, label: { normal: { formatter: '{b}', position: 'right', show: true }, }, itemStyle: { normal: { color: 'blue', shadowBlur: 10, shadowColor: '#333' } }, }, { name: 'Top5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data1.sort(function (a, b) { return b.value - a.value; }).slice(0, 5)), encode: { value: 2 }, symbolSize: function (val) { return val[2] / 20; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: 'red', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ] };
ehcart 版本使用的是4.21.
首先使用 gird 来做布局, 设定每个图表坐标系所占的百分比, 及位置. 对于不需要坐标系的, 我的方法是隐藏.
然后就可以在配置中使用数组来对每个图表做单个配置了
总体效果如下
