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>