vue快速建立一个echarts图表

//步骤一：创一个div标签内绑定id为mian；

//步骤二：methods创建drawChart（）方法

methods: {

      drawChart() {

        // 基于准备好的dom，初始化echarts实例

        let myChart = this.$echarts.init(document.getElementById("main"));

        // 自定义一个颜色

        var color2 = new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: "#2dcab1",

          },

          {

            offset: 1,

            color: "#3fb3f2",

          },

        ]);

        // 指定图表的配置项和数据

        let option = {

          tooltip: { //鼠标 触摸上显示数据提示

            trigger: 'item'

          },

          title: { //设置标题

            text: "总产值年度趋势",

            left: "left",

            textStyle: {

              fontSize: 12,

              fontWeight: 'bolder',

              color: '#00D8FFFF' // 主标题文字颜色

            },

          },

          xAxis: { //x轴设置 

            type: 'category',

            data: ['2017', '2018', '2019', ],

            axisLabel: {  //x轴 值的字体样式

              color: "#fff",

              fontSize: "12",

              interval: 0,

            },

            axisLine: { //x轴 线的样式

              lineStyle: {

                color: "rgba(14,79,173,0.62)",

                width: 1,

              },

            },

            axisTick: {

              show: false,

            },

          },

          grid: { //柱状图表设置距离容器上下左右的距离

            left: "5",

            right: "5",

            bottom: "0",

            top: "38",

            containLabel: true,

          },

          yAxis: { //y轴设置

            name: "(万元)",

            type: 'value',

            axisLabel: {

              color: "#fff",

              fontSize: "10",

              interval: 0,

            },

            axisLine: {

              lineStyle: {

                color: "rgba(14,79,173,0.62)",

                width: 1,

              },

            },

            axisTick: {

              show: false,

            },

            splitLine: { //y轴网格线的颜色的设置

              lineStyle: {

                color: "rgba(60,133,228,0.2)",

              },

            },

            nameTextStyle: { //单位的设置

              color: "#fff",

              fontSize: "10",

              padding: [0, 0, -8, -20],

            },

          },

          series: [{

            name: '访问来源',

            data: [20, 26, 30],

            type: 'bar',

            barWidth: 10,//柱的宽度

            showBackground: false,

            itemStyle: {

              color: color2,//使用了自定义的渐变色

              barBorderRadius: 0,

            },

          }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

      }

    },

//最后在 mounted调用
mounted() {

      this.drawChart();

    }