Echarts --柱状图动态提示框 tooltip

 

 

 效果如图所示,阴影部分及提示框隔五秒移动一次

下面贴上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);

<template>
  <div id="bzdzArea"></div>
</template>
<script>
export default {
  name: "MultipleColumns",
  data() {
    return {
      timmerOneAnim: null
    };
  },
  methods: {
    getbzdzAreaChart() {
      var namedata = [
        "姑苏区",
        "虎丘区",
        "吴中区",
        "相城区",
        "吴江区",
        "工业园区",
        "常熟区",
        "昆山市",
        "张家港市",
        "太仓市"
      ];
      var areaChart = this.$echarts.init(document.getElementById("bzdzArea"));
      var option = {
        tooltip: {
          //提示框组件
          trigger: "axis",
          formatter: "{b}<br/>{a0}: {c0}<br/>{a1}: {c1}<br/>{a2}: {c2}", //提示框浮层内容格式器
          axisPointer: { //坐标轴指示器
            type: "shadow", //'shadow' 阴影指示器
            label: {
              backgroundColor: "#6a7985"
            }
          },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12
          }
        },
        grid: {
          top: "15%",
          bottom: "10%",
          right: "5%",
          left: "5%",
          containLabel: true
        },
        legend: { //图例组件
          right: "35%",
          top: "2%",
          itemGap: 16,
          itemWidth: 18,
          itemHeight: 10,
          data: [
            {
              name: "村"
            },
            {
              name: "区"
            },
            {
              name: "街路巷"
            }
          ],
          textStyle: {
            color: "#a8aab0",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: "category",
            data: namedata,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0, //设置为 1,表示『隔一个标签显示一个标签』
              textStyle: {
                color: "#6C7293",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              },
              rotate: 0
            },
            axisTick: {
              //坐标轴刻度相关设置。
              show: false
            },
            axisLine: {
              //坐标轴轴线相关设置
              lineStyle: {
                color: "#fff",
                opacity: 0.2
              }
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#EAEBF0"
              }
            }
          }
        ],
        series: [
          {
            name: "村",
            type: "bar",
            data: [ 10, 45, 30, 45, 15, 5, 62, 8, 60, 32, 60, 55, 45, 30, 15, 10 ],
            barWidth: 6,
            barGap: 0.5, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: "#7A79FF",
                barBorderRadius: 50,
                borderWidth: 0
              }
            }
          },
          {
            name: "区",
            type: "bar",
            data: [ 10, 15, 30, 45, 55, 60, 62, 30, 80, 62, 60, 55, 45, 30, 15, 7 ],
            barWidth: 6,
            barGap: 0.5, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: "#58CFFF",
                barBorderRadius: 50,
                borderWidth: 0
              }
            }
          },
          {
            name: "街路巷",
            type: "bar",
            data: [10, 15, 30, 45, 5, 60, 62, 10, 80, 2, 40, 55, 45, 30, 45, 8],
            barWidth: 6,
            barGap: 0.5, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: "#333FFF",
                barBorderRadius: 50,
                borderWidth: 0
              }
            }
          }
        ]
      };
      areaChart.setOption(option);
      // tooltip定时移动
      var count = 0;
      if (this.timmerOneAnim) {
        clearInterval(this.timmerOneAnim);
      }
      this.timmerOneAnim = setInterval(() => {
        areaChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % namedata.length
        });
        count++;
      }, 5000);
    }
  },
  mounted() {
    this.getbzdzAreaChart();
  }
};
</script>
<style>
</style>