vue 引入static静态文件 echart.js

总结： vue中使用echart，引入js.
var echarts = require(’…/…/…/…/static/js/echarts-4.2.0.js’)
methods中封装好方法。
钩子函数中调用。

<script>
var echarts = require('../../../../static/js/echarts-4.2.0.js')

  methods: {
        // 公路统计echarts图表
        setBarEcharts: function () {
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('barEcharts'));
          // 指定图表的配置项和数据
          var option = {
            tooltip: {},
            legend: {
              right: 20,
              data: ['未抢通', '已抢通', '未审核']
            },
            xAxis: {
              data: ["杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市"],
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            yAxis: {
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: "#f6f6f6"
                }
              }
            },
            series: [
              {
                name: '未抢通',
                stack: 'bar1',
                type: 'bar',
                barWidth: '40%',
                data: [5, 20, 36, 10, 10, 20, 20, 20]
              },
              {
                name: '已抢通',
                stack: 'bar1',
                type: 'bar',
                barWidth: '40%',
                data: [5, 20, 36, 10, 10, 20, 20, 20]
              },
              {
                name: '未审核',
                stack: 'bar1',
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                  barBorderRadius: [4, 4, 0, 0]
                },
                data: [5, 20, 36, 10, 10, 20, 20, 20]
              }
            ],
            color: ['#9788ef', '#25c8b3', '#3599f3']
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },