vue使用echarts代码展示和效果

这两天在写vue项目创建一个图表，本人用echarts来创建，因为很强大的一个插件，要实现的效果图如下：

刚开始对插件的下载，引入不熟悉，从头到尾操作了一遍，先从下载echarts插件说起吧
1.在当前文件夹终端输入代码 cnpm install echarts -S
检查是否下载成功，package.json 文件里会添加echarts的版本号；
同时在main.js文件添加代码：
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
这里代表全局引入
之后就可以写你需要实现需求的代码了
在网上找个小例子先试一下，打开网页是否报错，如果出现init或者关于依赖的报错，极大可能不是依赖的问题，而是echarts版本号的问题，你可能下载的是5.0的版本，需手动删除重新下载低版本的echarts
删除代码如下：
npm uninstall echarts // 卸载
重新下载：
npm install echarts@4.9.0 //重装
npm fund
npm run dev
讲到这里也只是下载和引入echarts的实现，此时你可以看到你写的代码效果图已经实现，要想达到你想要的效果，还得继续调整。
在echarts官网里有很多实例可以引入，刚开始不知道怎么引入，先讲讲怎么引入吧
如图：

要想实现这样的一个实例，官网已经给出了代码，我们直接粘贴好了
在你当前展示代码的的vue页面的template创建一个div

  <div class="body">
      <div id="echarts"></div>
    </div>

在script的data->return里面直接引入代码；

<script>
 export default {
    name: "",
    data () {
      return {
      	option:{
           //官网代码  // option后面的= 改为：
      	 tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
      	}
      }
      }
      }
 </script>

在mounted里面写入两行代码；

 let myChart = this.$echarts.init(document.getElementById("echarts"));
      //设置echarts对象的option属性
      myChart.setOption(this.option)

最后在style里面写入样式；实例上的效果图就可以实现
在这里我展示自己的效果图实现过程，也就是第一张图实现效果，全部代码展示如下：

<template>
  <div>
    <!--设置一个div-->
    <div class="body">
      <div id="echarts"></div>
    </div>
  </div>
</template>
<script>
  // import echarts from 'echarts'
  export default {
    name: "",
    data () {
      return {
        option : {    //实例在这里引入
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['实际', '延期']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              data: ['BO', 'CH', 'EI', 'EE', 'PTT', 'TR'],
              axisLabel: {
                interval: 0,
                align: "center",
                padding: [22, 0, 2, 0]
              },
            },
            {      // 单个grid组件放两个x轴
              type: 'category',
              position: 'bottom',
              offset: 1,    //X 轴相对于默认位置的偏移
              axisPointer: {
                type: 'none'
              },
              axisTick:{
                show: false
              },
              axisLine:{
                show: false
              },
              axisLabel: {   //坐标轴刻度标签的相关设置
                interval: 0,  //坐标轴刻度标签的显示间隔
                align: "center",
                padding: [2, 0, 2, 0]
              },
              splitLine: {  //坐标轴在 grid 区域中的分隔线
                interval: 2
              },
              data: ['计划                   发布', '计划                 发布', '计划               发布', '计划               发布', '计划               发布','计划               发布']
            }

          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '实际',
              type: 'bar',
              label: {
                show: true,
                position: 'inside'
              },
              data: [20, 10, 24, 24, 20, 22]
            },
            {
              name: '收入',
              type: 'bar',
              stack: '总量',
              label: {
                show: true
              },
              data: [32, 30, 34, 37, 39, 45]
            },
            {
              name: '延期',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'inside'
              },
              data:  [31, 32, 31, 34, 30, 40]
            }
          ]
        }
      };
    },
    mounted() {
      let myChart = this.$echarts.init(document.getElementById("echarts"));
      //设置echarts对象的option属性
      myChart.setOption(this.option)
    }
  }
</script>
<style>
  .body
  {
    width: 100%;
    height: 100vh;

  }
  #echarts
  {
    width: 80%;
    height: 100%;
  }
</style>

里面具体的描述我就不多说了，毕竟想要实现自己想要的效果还是需要在官网里多看配置，展示的代码有一个亮点，在x轴实现两行刻度值，便在xAxis里面放了两个x轴，来达到实现效果。