Echar使用案例
ECharts动态数据+时间轴+dataZoom
https://blog.csdn.net/zouhaodong/article/details/80974837
echarts 通过ajax实现动态数据加载
https://www.cnblogs.com/xy-milu/p/9372987.html
echarts数据动态更新和dataZoom被重置的解决方案
https://blog.csdn.net/aliven1/article/details/98177378
推荐！数据可视化的十种优秀JavaScript图表库
https://developer.51cto.com/art/201904/595652.htm
1 <script type="text/javascript"> 2 // 基于准备好的dom，初始化echarts实例 3 var myChart = echarts.init(document.getElementById('main')); 4 5 $("input[name=qryPrice]").change(function () { 6 QueryChart(); 7 }); 8 function QueryChart() { 9 myChart.showLoading(); 10 $.ajax({ 11 type: "post", 12 url: "@MaterialSpecChartUrl", 13 data: { 14 qryPrice: $("input[name='qryPrice']:checked").val(), 15 ItemType: $('#SpecChartItemType').val(), 16 ItemMainClass: $('#SpecChartItemMainClass').val(), 17 ItemSubClass: $('#SpecChartItemSubClass').val(), 18 ProjectNo: $('#SpecChartProjectNo').val(), 19 SpecModel: $('#SpecChartSpecModel').val(), 20 Brand: $('#SpecChartBrand').val() 21 }, 22 success: function (result) { 23 myChart.hideLoading(); 24 var resultJ = JSON.parse(result); 25 var data = resultJ.rows; 26 // 指定图表的配置项和数据 27 var option = { 28 //title: { 29 // text: '同一规格型号历史价格' 30 //}, 31 tooltip: { 32 trigger: 'item', 33 axisPointer: { 34 type: 'cross' 35 }, 36 formatter: function (param) { 37 return [ 38 '时间: ' + param.data.CreateTime + '<hr size=1 style="margin: 3px 0">', 39 '价格: ' + param.data.Price + '<br/>', 40 '数量：' + param.data.Amount + '<br/>', 41 '品牌: ' + param.data.Brand + '<br/>', 42 '城市: ' + param.data.CityName + '<br/>', 43 '项目: ' + param.data.ProjectName 44 ].join(''); 45 } 46 }, 47 grid: { 48 right: 150, 49 left: 50 50 }, 51 legend: { 52 //data: ['单价', '数量'] 53 type: 'scroll', 54 orient: get_orient(), // 'horizontal' 55 right: get_legendRight(), 56 //width: 100, 57 formatter: function (name) { 58 return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '…'); 59 }, 60 tooltip: { 61 show: true 62 } 63 }, 64 dataset: { 65 // 提供一份数据。 66 source: data 67 }, 68 xAxis: { 69 type: 'time', 70 axisLabel: { 71 width: '100%', 72 formatter: function (value, index) { 73 // 格式化成月/日，只在第一个刻度显示年份 74 var date = new Date(value); 75 var y = date.getFullYear(); 76 var m = date.getMonth() + 1; 77 var d = date.getDate(); 78 return y+'-'+m+'-'+d; 79 } 80 }, 81 inverse: true, 82 splitLine: { 83 show: false 84 } 85 }, 86 yAxis: { 87 type: 'value', 88 //gridIndex: 1, 89 splitLine: { 90 show: false 91 } 92 }, 93 dataZoom: [ 94 { // 这个dataZoom组件，默认控制x轴。 95 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 96 handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', 97 xAxisIndex: [0], 98 start: 70, // 左边在 10% 的位置。 99 end: 100 // 右边在 60% 的位置。 100 }, 101 { // 这个dataZoom组件，也控制x轴。 102 type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件 103 xAxisIndex: [0], 104 start: 70, // 左边在 10% 的位置。 105 end: 100 // 右边在 60% 的位置。 106 } 107 ], 108 series: serie_func(data) 109 }; 110 111 // 使用刚指定的配置项和数据显示图表。 112 myChart.setOption(option, true); 113 }, 114 error: function (XMLHttpRequest, textStatus, errorThrown) { 115 } 116 }); 117 }; 118 void function InitChart() { 119 QueryChart(); 120 }(); 121 /*serie生成器*/ 122 function get_orient() { 123 return 'vertical'; 124 }; 125 function get_legendRight() { 126 return 10; 127 }; 128 129 function serie_func(item_op) { 130 var serie = []; 131 var mmAvgPrice = { 132 name: '月移动加权平均价', // item_op[i].ProjectName,//获取系列名称 133 type: 'line', 134 symbolSize: 15, 135 tooltip: { 136 //trigger: 'item', 137 formatter: function (param) { 138 // 格式化成月/日，只在第一个刻度显示年份 139 var date = new Date(param.data.CreateTime); 140 var y = date.getFullYear(); 141 var m = date.getMonth() + 1; 142 var d = date.getDate(); 143 return [ 144 '单价: ' + param.data.MMAVPrice + '<br/>', 145 '时间: ' + y + '-' + m 146 ].join(''); 147 } 148 }, 149 encode: { 150 x: 2, // 表示维度 3、1、5 映射到 x 轴。 151 y: 25, // 表示维度 2 映射到 y 轴。 152 tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。 153 }, 154 itemStyle: { 155 color: 'red' 156 } 157 } 158 159 serie.push(mmAvgPrice); 160 for (var i = 0; i < item_op.length; i++) { //根据后端传来的数据item_op的长度循环创建serie里面的data[]，这里取的名字是item 161 var item = { 162 name: get_serie_name(item_op[i]), // item_op[i].ProjectName,//获取系列名称 163 type: 'scatter', 164 symbolSize: 20, 165 data: [ 166 { 167 value: [item_op[i].CreateTime, item_op[i].Price],//x,y轴对应的数据 168 name: item_op[i].CityName, 169 Amount: item_op[i].Amount, 170 Brand: item_op[i].Brand, 171 CreateTime: item_op[i].CreateTime, 172 ITEMSUBCLASS: item_op[i].ITEMSUBCLASS, 173 MaterialName: item_op[i].MaterialName, 174 Price: item_op[i].Price, 175 ProjectName: item_op[i].ProjectName, 176 SpecModel: item_op[i].SpecModel, 177 EnginAreaName: item_op[i].EnginAreaName, 178 CityName: item_op[i].CityName 179 } 180 ] 181 } 182 serie.push(item); 183 184 }; 185 186 return serie; 187 }; 188 function get_serie_name(item) { 189 var qryPrice = $("input[name='qryPrice']:checked").val(); 190 var serie_name = ""; 191 if (qryPrice == 0) { 192 serie_name = item.ProjectName; 193 }else if(qryPrice == 1){ 194 serie_name = item.Brand; 195 } else if (qryPrice == 2) { 196 serie_name = item.ProjectName; 197 } else if (qryPrice == 3) { 198 serie_name = item.EnginAreaName; 199 } else { 200 serie_name = item.ProjectName; 201 } 202 return serie_name; 203 } 204 205 206 </script>
