@{ ViewBag.Title = "barlj"; } <h2>barlj</h2> <div id="main" style="width: 1000px;height:800px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main‘), ‘shine‘, { width: 800 }); option = { title: { text: ‘ECharts2 vs ECharts1‘, subtext: ‘Chrome下测试数据‘ }, tooltip: { trigger: ‘axis‘, formatter: function (params) { var s = ‘‘; s += params[0].name + ‘<br />‘; var l = params.length; for (var i = 0; i < l; i++) { s += params[i].seriesName + ‘: ‘ + params[i].value + ‘<br />‘; } return s; } }, legend: { //中间空字符为换行??? data: [‘本期收入‘, ‘同期收入‘, ‘‘, ‘本期累计‘, ‘同期累计‘], selected: { ‘本期收入‘: true, ‘同期收入‘: true, ‘本期累计‘: true, ‘同期累计‘: true } }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: [‘line‘, ‘bar‘] }, restore: { show: true }, saveAsImage: { show: true } } }, //拖动项,3.0不支持 calculable: true, //grid: { y: 70, y2: 30, x2: 20 }, xAxis: [ { type: ‘category‘, data: [‘Line‘, ‘Bar‘, ‘Scatter‘, ‘K‘, ‘Map‘] }, { type: ‘category‘, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: false }, splitLine: { show: false }, data: [‘Line‘, ‘Bar‘, ‘Scatter‘, ‘K‘, ‘Map‘] } ], yAxis: [ { type: ‘value‘, axisLabel: { formatter: ‘{value} ms‘ } } ], series: [ { name: ‘本期收入‘, type: ‘bar‘, itemStyle: { normal: { color: ‘rgba(193,35,43,1)‘, label: { show: true, position: ‘top‘ } } }, data: [40, 155, 95, 75, 0] }, { name: ‘同期收入‘, type: ‘bar‘, itemStyle: { normal: { color: ‘rgba(181,195,52,1)‘, label: { show: true, position: ‘top‘, textStyle: { color: ‘#27727B‘ } } } }, data: [100, 200, 105, 100, 156] }, { name: ‘本期累计‘, type: ‘bar‘, xAxisIndex: 1, itemStyle: { normal: { color: ‘rgba(193,35,43,0.5)‘, label: { show: true, position: ‘top‘, formatter: function (p) { return p.value > 0 ? (p.value /*+ ‘\n‘*/) : ‘‘; } } } }, data: [96, 224, 164, 124, 0] }, { name: ‘同期累计‘, type: ‘bar‘, xAxisIndex: 1, itemStyle: { normal: { color: ‘rgba(181,195,52,0.5)‘, label: { show: true, position: ‘top‘ } } }, data: [491, 283, 389, 955, 347] } ] }; myChart.on(‘legendselectchanged‘, function (params) { if (params.name == ‘本期收入‘) { if (params.selected[‘本期收入‘]) { option.legend.selected[‘本期收入‘] = true; option.legend.selected[‘同期收入‘] = true; } else { option.legend.selected[‘本期收入‘] = false; option.legend.selected[‘同期收入‘] = false; } } if (params.name == ‘同期收入‘) { if (params.selected[‘同期收入‘]) { option.legend.selected[‘本期收入‘] = true; option.legend.selected[‘同期收入‘] = true; } else { option.legend.selected[‘本期收入‘] = false; option.legend.selected[‘同期收入‘] = false; } } if (params.name == ‘本期累计‘) { if (params.selected[‘本期累计‘]) { option.legend.selected[‘本期累计‘] = true; option.legend.selected[‘同期累计‘] = true; } else { option.legend.selected[‘本期累计‘] = false; option.legend.selected[‘同期累计‘] = false; } } if (params.name == ‘同期累计‘) { if (params.selected[‘同期累计‘]) { option.legend.selected[‘本期累计‘] = true; option.legend.selected[‘同期累计‘] = true; } else { option.legend.selected[‘本期累计‘] = false; option.legend.selected[‘同期累计‘] = false; } } myChart.setOption(option); }); myChart.setOption(option); </script>
路过的感觉对你有用的帮忙配下色 :)
时间: 2024-10-13 04:28:04