Echar使用例
22640 ワード
ECharts動的データ+時間軸+dataZoom
https://blog.csdn.net/zouhaodong/article/details/80974837
https://blog.csdn.net/zouhaodong/article/details/80974837
1
2 <span style="color: #008000;">//</span><span style="color: #008000;"> dom， echarts </span>
3 <span style="color: #0000ff;">var</span> myChart = echarts.init(document.getElementById('main'<span style="color: #000000;">));
</span>4
5 $("input[name=qryPrice]").change(<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
</span>6<span style="color: #000000;"> QueryChart();
</span>7<span style="color: #000000;"> });
</span>8 <span style="color: #0000ff;">function</span><span style="color: #000000;"> QueryChart() {
</span>9<span style="color: #000000;"> myChart.showLoading();
</span>10<span style="color: #000000;"> $.ajax({
</span>11 type: "post"<span style="color: #000000;">,
</span>12 url: "@MaterialSpecChartUrl"<span style="color: #000000;">,
</span>13<span style="color: #000000;"> data: {
</span>14 qryPrice: $("input[name='qryPrice']:checked"<span style="color: #000000;">).val(),
</span>15 ItemType: $('#SpecChartItemType'<span style="color: #000000;">).val(),
</span>16 ItemMainClass: $('#SpecChartItemMainClass'<span style="color: #000000;">).val(),
</span>17 ItemSubClass: $('#SpecChartItemSubClass'<span style="color: #000000;">).val(),
</span>18 ProjectNo: $('#SpecChartProjectNo'<span style="color: #000000;">).val(),
</span>19 SpecModel: $('#SpecChartSpecModel'<span style="color: #000000;">).val(),
</span>20 Brand: $('#SpecChartBrand'<span style="color: #000000;">).val()
</span>21<span style="color: #000000;"> },
</span>22 success: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (result) {
</span>23<span style="color: #000000;"> myChart.hideLoading();
</span>24 <span style="color: #0000ff;">var</span> resultJ =<span style="color: #000000;"> JSON.parse(result);
</span>25 <span style="color: #0000ff;">var</span> data =<span style="color: #000000;"> resultJ.rows;
</span>26 <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
27 <span style="color: #0000ff;">var</span> option =<span style="color: #000000;"> {
</span>28 <span style="color: #008000;">//</span><span style="color: #008000;">title: {</span>
29 <span style="color: #008000;">//</span><span style="color: #008000;"> text: ' '</span>
30 <span style="color: #008000;">//</span><span style="color: #008000;">},</span>
31<span style="color: #000000;"> tooltip: {
</span>32 trigger: 'item'<span style="color: #000000;">,
</span>33<span style="color: #000000;"> axisPointer: {
</span>34 type: 'cross'
35<span style="color: #000000;"> },
</span>36 formatter: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (param) {
</span>37 <span style="color: #0000ff;">return</span><span style="color: #000000;"> [
</span>38 ' : ' + param.data.CreateTime + '<hr size=1 style="margin: 3px 0">'<span style="color: #000000;">,
</span>39 ' : ' + param.data.Price + '<br/>'<span style="color: #000000;">,
</span>40 ' ：' + param.data.Amount + '<br/>'<span style="color: #000000;">,
</span>41 ' : ' + param.data.Brand + '<br/>'<span style="color: #000000;">,
</span>42 ' : ' + param.data.CityName + '<br/>'<span style="color: #000000;">,
</span>43 ' : ' +<span style="color: #000000;"> param.data.ProjectName
</span>44 ].join(''<span style="color: #000000;">);
</span>45<span style="color: #000000;"> }
</span>46<span style="color: #000000;"> },
</span>47<span style="color: #000000;"> grid: {
</span>48 right: 150<span style="color: #000000;">,
</span>49 left: 50
50<span style="color: #000000;"> },
</span>51<span style="color: #000000;"> legend: {
</span>52 <span style="color: #008000;">//</span><span style="color: #008000;">data: [' ', ' ']</span>
53 type: 'scroll'<span style="color: #000000;">,
</span>54 orient: get_orient(), <span style="color: #008000;">//</span><span style="color: #008000;"> 'horizontal'</span>
55<span style="color: #000000;"> right: get_legendRight(),
</span>56 <span style="color: #008000;">//</span><span style="color: #008000;">width: 100,</span>
57 formatter: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (name) {
</span>58 <span style="color: #0000ff;">return</span> echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '…'<span style="color: #000000;">);
</span>59<span style="color: #000000;"> },
</span>60<span style="color: #000000;"> tooltip: {
</span>61 show: <span style="color: #0000ff;">true</span>
62<span style="color: #000000;"> }
</span>63<span style="color: #000000;"> },
</span>64<span style="color: #000000;"> dataset: {
</span>65 <span style="color: #008000;">//</span><span style="color: #008000;"> 。</span>
66<span style="color: #000000;"> source: data
</span>67<span style="color: #000000;"> },
</span>68<span style="color: #000000;"> xAxis: {
</span>69 type: 'time'<span style="color: #000000;">,
</span>70<span style="color: #000000;"> axisLabel: {
</span>71 width: '100%'<span style="color: #000000;">,
</span>72 formatter: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (value, index) {
</span>73 <span style="color: #008000;">//</span><span style="color: #008000;"> / ， </span>
74 <span style="color: #0000ff;">var</span> date = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Date(value);
</span>75 <span style="color: #0000ff;">var</span> y =<span style="color: #000000;"> date.getFullYear();
</span>76 <span style="color: #0000ff;">var</span> m = date.getMonth() + 1<span style="color: #000000;">;
</span>77 <span style="color: #0000ff;">var</span> d =<span style="color: #000000;"> date.getDate();
</span>78 <span style="color: #0000ff;">return</span> y+'-'+m+'-'+<span style="color: #000000;">d;
</span>79<span style="color: #000000;"> }
</span>80<span style="color: #000000;"> },
</span>81 inverse: <span style="color: #0000ff;">true</span><span style="color: #000000;">,
</span>82<span style="color: #000000;"> splitLine: {
</span>83 show: <span style="color: #0000ff;">false</span>
84<span style="color: #000000;"> }
</span>85<span style="color: #000000;"> },
</span>86<span style="color: #000000;"> yAxis: {
</span>87 type: 'value'<span style="color: #000000;">,
</span>88 <span style="color: #008000;">//</span><span style="color: #008000;">gridIndex: 1,</span>
89<span style="color: #000000;"> splitLine: {
</span>90 show: <span style="color: #0000ff;">false</span>
91<span style="color: #000000;"> }
</span>92<span style="color: #000000;"> },
</span>93<span style="color: #000000;"> dataZoom: [
</span>94 { <span style="color: #008000;">//</span><span style="color: #008000;"> dataZoom ， x 。</span>
95 type: 'slider', <span style="color: #008000;">//</span><span style="color: #008000;"> dataZoom slider dataZoom </span>
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'<span style="color: #000000;">,
</span>97 xAxisIndex: [0<span style="color: #000000;">],
</span>98 start: 70, <span style="color: #008000;">//</span><span style="color: #008000;"> 10% 。</span>
99 end: 100 <span style="color: #008000;">//</span><span style="color: #008000;"> 60% 。</span>
100<span style="color: #000000;"> },
</span>101 { <span style="color: #008000;">//</span><span style="color: #008000;"> dataZoom ， x 。</span>
102 type: 'inside', <span style="color: #008000;">//</span><span style="color: #008000;"> dataZoom inside dataZoom </span>
103 xAxisIndex: [0<span style="color: #000000;">],
</span>104 start: 70, <span style="color: #008000;">//</span><span style="color: #008000;"> 10% 。</span>
105 end: 100 <span style="color: #008000;">//</span><span style="color: #008000;"> 60% 。</span>
106<span style="color: #000000;"> }
</span>107<span style="color: #000000;"> ],
</span>108<span style="color: #000000;"> series: serie_func(data)
</span>109<span style="color: #000000;"> };
</span>110
111 <span style="color: #008000;">//</span><span style="color: #008000;"> 。</span>
112 myChart.setOption(option, <span style="color: #0000ff;">true</span><span style="color: #000000;">);
</span>113<span style="color: #000000;"> },
</span>114 error: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (XMLHttpRequest, textStatus, errorThrown) {
</span>115<span style="color: #000000;"> }
</span>116<span style="color: #000000;"> });
</span>117<span style="color: #000000;"> };
</span>118 <span style="color: #0000ff;">void</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> InitChart() {
</span>119<span style="color: #000000;"> QueryChart();
</span>120<span style="color: #000000;"> }();
</span>121 <span style="color: #008000;">/*</span><span style="color: #008000;">serie </span><span style="color: #008000;">*/</span>
122 <span style="color: #0000ff;">function</span><span style="color: #000000;"> get_orient() {
</span>123 <span style="color: #0000ff;">return</span> 'vertical'<span style="color: #000000;">;
</span>124<span style="color: #000000;"> };
</span>125 <span style="color: #0000ff;">function</span><span style="color: #000000;"> get_legendRight() {
</span>126 <span style="color: #0000ff;">return</span> 10<span style="color: #000000;">;
</span>127<span style="color: #000000;"> };
</span>128
129 <span style="color: #0000ff;">function</span><span style="color: #000000;"> serie_func(item_op) {
</span>130 <span style="color: #0000ff;">var</span> serie =<span style="color: #000000;"> [];
</span>131 <span style="color: #0000ff;">var</span> mmAvgPrice =<span style="color: #000000;"> {
</span>132 name: ' ', <span style="color: #008000;">//</span><span style="color: #008000;"> item_op[i].ProjectName,// </span>
133 type: 'line'<span style="color: #000000;">,
</span>134 symbolSize: 15<span style="color: #000000;">,
</span>135<span style="color: #000000;"> tooltip: {
</span>136 <span style="color: #008000;">//</span><span style="color: #008000;">trigger: 'item',</span>
137 formatter: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (param) {
</span>138 <span style="color: #008000;">//</span><span style="color: #008000;"> / ， </span>
139 <span style="color: #0000ff;">var</span> date = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Date(param.data.CreateTime);
</span>140 <span style="color: #0000ff;">var</span> y =<span style="color: #000000;"> date.getFullYear();
</span>141 <span style="color: #0000ff;">var</span> m = date.getMonth() + 1<span style="color: #000000;">;
</span>142 <span style="color: #0000ff;">var</span> d =<span style="color: #000000;"> date.getDate();
</span>143 <span style="color: #0000ff;">return</span><span style="color: #000000;"> [
</span>144 ' : ' + param.data.MMAVPrice + '<br/>'<span style="color: #000000;">,
</span>145 ' : ' + y + '-' +<span style="color: #000000;"> m
</span>146 ].join(''<span style="color: #000000;">);
</span>147<span style="color: #000000;"> }
</span>148<span style="color: #000000;"> },
</span>149<span style="color: #000000;"> encode: {
</span>150 x: 2, <span style="color: #008000;">//</span><span style="color: #008000;"> 3、1、5 x 。</span>
151 y: 25, <span style="color: #008000;">//</span><span style="color: #008000;"> 2 y 。</span>
152 tooltip: [3, 2, 4] <span style="color: #008000;">//</span><span style="color: #008000;"> 3、2、4 tooltip 。</span>
153<span style="color: #000000;"> },
</span>154<span style="color: #000000;"> itemStyle: {
</span>155 color: 'red'
156<span style="color: #000000;"> }
</span>157<span style="color: #000000;"> }
</span>158
159<span style="color: #000000;"> serie.push(mmAvgPrice);
</span>160 <span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = 0; i < item_op.length; i++) { <span style="color: #008000;">//</span><span style="color: #008000;"> item_op serie data[]， item</span>
161 <span style="color: #0000ff;">var</span> item =<span style="color: #000000;"> {
</span>162 name: get_serie_name(item_op[i]), <span style="color: #008000;">//</span><span style="color: #008000;"> item_op[i].ProjectName,// </span>
163 type: 'scatter'<span style="color: #000000;">,
</span>164 symbolSize: 20<span style="color: #000000;">,
</span>165<span style="color: #000000;"> data: [
</span>166<span style="color: #000000;"> {
</span>167 value: [item_op[i].CreateTime, item_op[i].Price],<span style="color: #008000;">//</span><span style="color: #008000;">x,y </span>
168<span style="color: #000000;"> name: item_op[i].CityName,
</span>169<span style="color: #000000;"> Amount: item_op[i].Amount,
</span>170<span style="color: #000000;"> Brand: item_op[i].Brand,
</span>171<span style="color: #000000;"> CreateTime: item_op[i].CreateTime,
</span>172<span style="color: #000000;"> ITEMSUBCLASS: item_op[i].ITEMSUBCLASS,
</span>173<span style="color: #000000;"> MaterialName: item_op[i].MaterialName,
</span>174<span style="color: #000000;"> Price: item_op[i].Price,
</span>175<span style="color: #000000;"> ProjectName: item_op[i].ProjectName,
</span>176<span style="color: #000000;"> SpecModel: item_op[i].SpecModel,
</span>177<span style="color: #000000;"> EnginAreaName: item_op[i].EnginAreaName,
</span>178<span style="color: #000000;"> CityName: item_op[i].CityName
</span>179<span style="color: #000000;"> }
</span>180<span style="color: #000000;"> ]
</span>181<span style="color: #000000;"> }
</span>182<span style="color: #000000;"> serie.push(item);
</span>183
184<span style="color: #000000;"> };
</span>185
186 <span style="color: #0000ff;">return</span><span style="color: #000000;"> serie;
</span>187<span style="color: #000000;"> };
</span>188 <span style="color: #0000ff;">function</span><span style="color: #000000;"> get_serie_name(item) {
</span>189 <span style="color: #0000ff;">var</span> qryPrice = $("input[name='qryPrice']:checked"<span style="color: #000000;">).val();
</span>190 <span style="color: #0000ff;">var</span> serie_name = ""<span style="color: #000000;">;
</span>191 <span style="color: #0000ff;">if</span> (qryPrice == 0<span style="color: #000000;">) {
</span>192 serie_name =<span style="color: #000000;"> item.ProjectName;
</span>193 }<span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(qryPrice == 1<span style="color: #000000;">){
</span>194 serie_name =<span style="color: #000000;"> item.Brand;
</span>195 } <span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (qryPrice == 2<span style="color: #000000;">) {
</span>196 serie_name =<span style="color: #000000;"> item.ProjectName;
</span>197 } <span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (qryPrice == 3<span style="color: #000000;">) {
</span>198 serie_name =<span style="color: #000000;"> item.EnginAreaName;
</span>199 } <span style="color: #0000ff;">else</span><span style="color: #000000;"> {
</span>200 serie_name =<span style="color: #000000;"> item.ProjectName;
</span>201<span style="color: #000000;"> }
</span>202 <span style="color: #0000ff;">return</span><span style="color: #000000;"> serie_name;
</span>203<span style="color: #000000;"> }
</span>204
205
206