vue2中简单使用echarts-最新

最近突然在写了vue2的项目，但是用echarts的时候犯了难,还得不断随机刷新数据，关键是init一直报错

1.第一步 安装echharts依赖

npm install echarts -S

2.第二步在mIan.js中引入

import * as echarts from 'echarts'

//vue全局注入echarts

Vue.prototype.$echarts = echarts;

 3.现在就可以使用到你的页面中了

//html部分

<div id="tuyi" style="width: 350px; height: 220px"></div>

 js部分

写在methods中

 methods: {

    //绘制图一

    draw_bar() {

      let myEchart = this.$echarts.init(document.getElementById("tuyi"));

      var data_val = [2220, 1682, 2791, 3000, 4090, 3230, 2910],

        xAxis_val = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

      var data_val1 = [0, 0, 0, 0, 0, 0, 0];

      var option = {

        backgroundColor: "#293042",

        grid: {

          left: 10,

          top: "10%",

          bottom: 20,

          right: 40,

          containLabel: true,

        },

        tooltip: {

          show: true,

          backgroundColor: "#384157",

          borderColor: "#384157",

          borderWidth: 1,

          formatter: "{b}:{c}",

          extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 1)",

        },

        legend: {

          right: 0,

          top: 0,

          data: ["距离"],

          textStyle: {

            color: "#5c6076",

          },

        },

        title: {

          text: "跑步数据检测",

          x: "4.5%",

          top: "1%",

          textStyle: {

            color: "#5c6076",

          },

        },

        xAxis: {

          data: xAxis_val,

          boundaryGap: false,

          axisLine: {

            show: false,

          },

          axisLabel: {

            textStyle: {

              color: "#5c6076",

            },

          },

          axisTick: {

            show: false,

          },

        },

        yAxis: {

          ayisLine: {

            show: false,

          },

          axisLabel: {

            textStyle: {

              color: "#5c6076",

            },

          },

          splitLine: {

            show: true,

            lineStyle: {

              color: "#2e3547",

            },

          },

          axisLine: {

            lineStyle: {

              color: "#384157",

            },

          },

        },

        series: [

          {

            type: "bar",

            name: "linedemo",

            tooltip: {

              show: false,

            },

            animation: false,

            barWidth: 1.4,

            hoverAnimation: false,

            data: data_val,

            itemStyle: {

              normal: {

                color: "#f17a52",

                opacity: 0.6,

                label: {

                  show: false,

                },

              },

            },

          },

          {

            type: "line",

            name: "距离",

            animation: false,

            symbol: "circle",

            hoverAnimation: false,

            data: data_val1,

            itemStyle: {

              normal: {

                color: "#f17a52",

                opacity: 0,

              },

            },

            lineStyle: {

              normal: {

                width: 1,

                color: "#384157",

                opacity: 1,

              },

            },

          },

          {

            type: "line",

            name: "linedemo",

            smooth: true,

            symbolSize: 10,

            animation: false,

            lineWidth: 1.2,

            hoverAnimation: false,

            data: data_val,

            symbol: "circle",

            itemStyle: {

              normal: {

                color: "#f17a52",

                shadowBlur: 40,

                label: {

                  show: true,

                  position: "top",

                  textStyle: {

                    color: "#f17a52",

                  },

                },

              },

            },

            areaStyle: {

              normal: {

                color: "#f17a52",

                opacity: 0.08,

              },

            },

          },

        ],

      };

//这里的作用是随机刷新数据

      setInterval(() => {

        for (let i = 0; i <= 11; i++) {

          //定义i确保柱图的每一项都能被刷新

          option.series[0].data[i] = Math.round(Math.random() * 600) + 1; //数据随机取值1-600,不要为0,如果为0的话该柱就会消失

        }

        myEchart.setOption(option, false); //每刷新一次重新显示图表

      }, 2000);

      myEchart.setOption(option);

    }

 },

然后在生命周期中调用

  mounted() {

    this.draw_bar();

    this.draw_bar2();

  },

 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用的。

ss