Echarts --柱狀圖動態提示框 tooltip

本文轉載自查看原文 2020-05-22 16:09 4470 Vue2.0/ Echarts

效果如圖所示,陰影部分及提示框隔五秒移動一次

下面貼上echarts官網實例中測試的源碼

 1    var timmerOneAnim=null;
  2    var namedata = [
  3         "姑蘇區",
  4         "虎丘區",
  5         "吳中區",
  6         "相城區",
  7         "吳江區",
  8         "工業園區",
  9         "常熟區",
 10         "昆山市",
 11         "張家港市",
 12         "太倉市"
 13       ];
　　　　  // var areaChart = this.$echarts.init(document.getElementById("xxx"));　　
 14       var option = {
 15         tooltip: {
 16           //提示框組件
 17           trigger: "axis",
 18           formatter: "{b}<br/>{a0}: {c0}<br/>{a1}: {c1}<br/>{a2}: {c2}",
 19           axisPointer: {
 20             type: "shadow",
 21             label: {
 22               backgroundColor: "#6a7985"
 23             }
 24           },
 25           textStyle: {
 26             color: "#fff",
 27             fontStyle: "normal",
 28             fontFamily: "微軟雅黑",
 29             fontSize: 12
 30           }
 31         },
 32         grid: {
 33           top: "15%",
 34           bottom: "10%",
 35           right: "5%",
 36           left: "5%",
 37           containLabel: true
 38         },
 39         legend: {
 40           //圖例組件，顏色和名字
 41           right: "35%",
 42           top: "2%",
 43           itemGap: 16,
 44           itemWidth: 18,
 45           itemHeight: 10,
 46           data: [
 47             {
 48               name: "村"
 49             },
 50             {
 51               name: "區"
 52             },
 53             {
 54               name: "街路巷"
 55             }
 56           ],
 57           textStyle: {
 58             color: "#a8aab0",
 59             fontStyle: "normal",
 60             fontFamily: "微軟雅黑",
 61             fontSize: 12
 62           }
 63         },
 64         xAxis: [
 65           {
 66             type: "category",
 67             data: namedata,
 68             axisLabel: {
 69               //坐標軸刻度標簽的相關設置。
 70               interval: 0, //設置為 1,表示『隔一個標簽顯示一個標簽』
 71               textStyle: {
 72                 color: "#6C7293",
 73                 fontStyle: "normal",
 74                 fontFamily: "微軟雅黑",
 75                 fontSize: 12
 76               },
 77               rotate: 0
 78             },
 79             axisTick: {
 80               //坐標軸刻度相關設置。
 81               show: false
 82             },
 83             axisLine: {
 84               //坐標軸軸線相關設置
 85               lineStyle: {
 86                 color: "#fff",
 87                 opacity: 0.2
 88               }
 89             },
 90             splitLine: {
 91               //坐標軸在 grid 區域中的分隔線。
 92               show: false
 93             }
 94           }
 95         ],
 96         yAxis: [
 97           {
 98             type: "value",
 99             splitNumber: 5,
100             axisLabel: {
101               textStyle: {
102                 color: "#a8aab0",
103                 fontStyle: "normal",
104                 fontFamily: "微軟雅黑",
105                 fontSize: 12
106               }
107             },
108             axisLine: {
109               show: false
110             },
111             axisTick: {
112               show: false
113             },
114             splitLine: {
115               show: true,
116               lineStyle: {
117                 color: "#EAEBF0"
118               }
119             }
120           }
121         ],
122         series: [
123           {
124             name: "村",
125             type: "bar",
126             data: [
127               10,
128               45,
129               30,
130               45,
131               15,
132               5,
133               62,
134               8,
135               60,
136               32,
137               60,
138               55,
139               45,
140               30,
141               15,
142               10
143             ],
144             barWidth: 6,
145             barGap: 0.5, //柱間距離
146             itemStyle: {
147               normal: {
148                 show: true,
149                 color: "#7A79FF",
150                 barBorderRadius: 50,
151                 borderWidth: 0
152               }
153             }
154           },
155           {
156             name: "區",
157             type: "bar",
158             data: [
159               10,
160               15,
161               30,
162               45,
163               55,
164               60,
165               62,
166               30,
167               80,
168               62,
169               60,
170               55,
171               45,
172               30,
173               15,
174               7
175             ],
176             barWidth: 6,
177             barGap: 0.5, //柱間距離
178             itemStyle: {
179               normal: {
180                 show: true,
181                 color: "#58CFFF",
182                 barBorderRadius: 50,
183                 borderWidth: 0
184               }
185             }
186           },
187           {
188             name: "街路巷",
189             type: "bar",
190             data: [10, 15, 30, 45, 5, 60, 62, 10, 80, 2, 40, 55, 45, 30, 45, 8],
191             barWidth: 6,
192             barGap: 0.5, //柱間距離
193             itemStyle: {
194               normal: {
195                 show: true,
196                 color: "#333FFF",
197                 barBorderRadius: 50,
198                 borderWidth: 0
199               }
200             }
201           }
202         ]
203       };
204  
205       // tooltip定時移動   注意:vue項目中  myChart換成自己初始化的名稱(我的是areaChart)
206       var count = 0;
207       if (timmerOneAnim) {
208         clearInterval(timmerOneAnim);
209       }
210       timmerOneAnim = setInterval(() => {
211         myChart.dispatchAction({
212           type: "showTip",
213           seriesIndex: 0,
214           dataIndex: count % namedata.length
215         });
216         count++;
217       }, 5000);

echarts官網實例測試版

  1 <template>
  2   <div id="bzdzArea"></div>
  3 </template>
  4 <script>
  5 export default {
  6   name: "MultipleColumns",
  7   data() {
  8     return {
  9       timmerOneAnim: null
 10     };
 11   },
 12   methods: {
 13     getbzdzAreaChart() {
 14       var namedata = [
 15         "姑蘇區",
 16         "虎丘區",
 17         "吳中區",
 18         "相城區",
 19         "吳江區",
 20         "工業園區",
 21         "常熟區",
 22         "昆山市",
 23         "張家港市",
 24         "太倉市"
 25       ];
 26       var areaChart = this.$echarts.init(document.getElementById("bzdzArea"));
 27       var option = {
 28         tooltip: {
 29           //提示框組件
 30           trigger: "axis",
 31           formatter: "{b}<br/>{a0}: {c0}<br/>{a1}: {c1}<br/>{a2}: {c2}", //提示框浮層內容格式器
 32           axisPointer: { //坐標軸指示器
 33             type: "shadow", //'shadow' 陰影指示器
 34             label: {
 35               backgroundColor: "#6a7985"
 36             }
 37           },
 38           textStyle: {
 39             color: "#fff",
 40             fontStyle: "normal",
 41             fontFamily: "微軟雅黑",
 42             fontSize: 12
 43           }
 44         },
 45         grid: {
 46           top: "15%",
 47           bottom: "10%",
 48           right: "5%",
 49           left: "5%",
 50           containLabel: true
 51         },
 52         legend: { //圖例組件
 53           right: "35%",
 54           top: "2%",
 55           itemGap: 16,
 56           itemWidth: 18,
 57           itemHeight: 10,
 58           data: [
 59             {
 60               name: "村"
 61             },
 62             {
 63               name: "區"
 64             },
 65             {
 66               name: "街路巷"
 67             }
 68           ],
 69           textStyle: {
 70             color: "#a8aab0",
 71             fontStyle: "normal",
 72             fontFamily: "微軟雅黑",
 73             fontSize: 12
 74           }
 75         },
 76         xAxis: [
 77           {
 78             type: "category",
 79             data: namedata,
 80             axisLabel: {
 81               //坐標軸刻度標簽的相關設置。
 82               interval: 0, //設置為 1,表示『隔一個標簽顯示一個標簽』
 83               textStyle: {
 84                 color: "#6C7293",
 85                 fontStyle: "normal",
 86                 fontFamily: "微軟雅黑",
 87                 fontSize: 12
 88               },
 89               rotate: 0
 90             },
 91             axisTick: {
 92               //坐標軸刻度相關設置。
 93               show: false
 94             },
 95             axisLine: {
 96               //坐標軸軸線相關設置
 97               lineStyle: {
 98                 color: "#fff",
 99                 opacity: 0.2
100               }
101             },
102             splitLine: {
103               //坐標軸在 grid 區域中的分隔線。
104               show: false
105             }
106           }
107         ],
108         yAxis: [
109           {
110             type: "value",
111             splitNumber: 5,
112             axisLabel: {
113               textStyle: {
114                 color: "#a8aab0",
115                 fontStyle: "normal",
116                 fontFamily: "微軟雅黑",
117                 fontSize: 12
118               }
119             },
120             axisLine: {
121               show: false
122             },
123             axisTick: {
124               show: false
125             },
126             splitLine: {
127               show: true,
128               lineStyle: {
129                 color: "#EAEBF0"
130               }
131             }
132           }
133         ],
134         series: [
135           {
136             name: "村",
137             type: "bar",
138             data: [ 10, 45, 30, 45, 15, 5, 62, 8, 60, 32, 60, 55, 45, 30, 15, 10 ],
139             barWidth: 6,
140             barGap: 0.5, //柱間距離
141             itemStyle: {
142               normal: {
143                 show: true,
144                 color: "#7A79FF",
145                 barBorderRadius: 50,
146                 borderWidth: 0
147               }
148             }
149           },
150           {
151             name: "區",
152             type: "bar",
153             data: [ 10, 15, 30, 45, 55, 60, 62, 30, 80, 62, 60, 55, 45, 30, 15, 7 ],
154             barWidth: 6,
155             barGap: 0.5, //柱間距離
156             itemStyle: {
157               normal: {
158                 show: true,
159                 color: "#58CFFF",
160                 barBorderRadius: 50,
161                 borderWidth: 0
162               }
163             }
164           },
165           {
166             name: "街路巷",
167             type: "bar",
168             data: [10, 15, 30, 45, 5, 60, 62, 10, 80, 2, 40, 55, 45, 30, 45, 8],
169             barWidth: 6,
170             barGap: 0.5, //柱間距離
171             itemStyle: {
172               normal: {
173                 show: true,
174                 color: "#333FFF",
175                 barBorderRadius: 50,
176                 borderWidth: 0
177               }
178             }
179           }
180         ]
181       };
182       areaChart.setOption(option);
183       // tooltip定時移動
184       var count = 0;
185       if (this.timmerOneAnim) {
186         clearInterval(this.timmerOneAnim);
187       }
188       this.timmerOneAnim = setInterval(() => {
189         areaChart.dispatchAction({
190           type: "showTip",
191           seriesIndex: 0,
192           dataIndex: count % namedata.length
193         });
194         count++;
195       }, 5000);
196     }
197   },
198   mounted() {
199     this.getbzdzAreaChart();
200   }
201 };
202 </script>
203 <style>
204 </style>

vue項目中使用版本

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts柱狀圖tooltip之formatter調試技巧之如何自定義echarts的提示框？ echarts tooltip懸浮提示框 formatter echarts之tooltip 提示框組件配置 echarts--提示框組件（tooltip） Echarts提示框（tooltip）位置設置 echarts 提示框（tooltip）位置設置 Echarts動態加載柱狀圖的實例 echarts學習之----動態排序柱狀圖 echarts柱狀圖 echarts 柱狀圖