vue 中echarts5.x 引入方式

效果图

一、安装

npm install echarts --save

二、全局引入（main.js）

 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts;
 

新建echarts.vue文件

<template>
  <div>
    <div :id="chartId" style="{ width: 500px, height: 500px}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      }
  },

 mounted() {
      this.charts()
  },

  methods: {
   charts() {
      // 基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],//可以写成对象
            type: "line",
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

三、按需引入
1.按需映入1
此时我们不在main.js文件中引入，而是直接在echart.vue组件中，直接引入echarts包中的基础模版，然后再按需引入需要的组件模块，修改echart.vue，内容如下：

<template>
  <div>
    <div :id="chartId" style="{ width: 500px, height: 500px}"></div>
  </div>
</template>

<script>
// 引入基本模板
let Echarts = require("echarts/lib/echarts");
// 按需引入需要的组件模块
require("echarts/lib/chart/line");
// 引入提示框和title组件，图例
require(‘echarts/lib/component/tooltip‘)
require(‘echarts/lib/component/title‘)
require('echarts/lib/component/legend')

export default {
  data() {
    return {
      }
  },

 mounted() {
      this.charts()
  },

  methods: {
   charts() {
      var chartDom = document.getElementById("spec-pople");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        grid: {
          left: "15%",
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#9AACD1",
          },
        },
        yAxis: {
          type: "category",
          data: [
            "重点监控",
            "社区矫正",
            "人员",
            "涉访",
            "其他",
          ],
          axisLabel: {
            color: "#9AACD1",
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [35, 19, 3, 2, 2],
            type: "bar",
            barWidth: "11",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            label: {
              show: true,
              color: "#36FDFE",
              offset: [0, -10],
              fontSize: 16,
              fontWeight: "bold"
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "#22EFEF" },
                { offset: 1, color: "#1B4493" },
              ]),
              borderRadius: 5,
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 1, color: "#22EFEF" },
                  { offset: 0, color: "#1B4493" },
                ]),
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

2.按需引入方式2
此时我们通过引入vue-echarts组件库，然后再按需引入echarts包中的组件模块：
安装vue-echarts

npm i  vue-echarts  --save

在入口文件main.js中：

// 引入vue-echarts组件库
import ECharts from 'vue-echarts'
// 按需引入需要的组件模块
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
// 注册组件后即可使用
Vue.component('chart', ECharts)

<template>
  <div>
    <chart ref="chart" :options="chartOptions" :auto-resize="true"></chart>
  </div>
</template>
<script>
export default {
  data() {
    return {
       chartOptions: {}
       }
  },

 mounted() {
      this.charts()
  },

  methods: {
   charts() {
     this.chartOptions = {
       grid: {
          left: "15%",
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#9AACD1",
          },
        },
        yAxis: {
          type: "category",
          data: [
            "重点监控",
            "社区矫正",
            "人员",
            "涉访",
            "其他",
          ],
          axisLabel: {
            color: "#9AACD1",
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [35, 19, 3, 2, 2],
            type: "bar",
            barWidth: "11",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            label: {
              show: true,
              color: "#36FDFE",
              offset: [0, -10],
              fontSize: 16,
              fontWeight: "bold"
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "#22EFEF" },
                { offset: 1, color: "#1B4493" },
              ]),
              borderRadius: 5,
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 1, color: "#22EFEF" },
                  { offset: 0, color: "#1B4493" },
                ]),
              },
            },
          },
        ],
      };
    },
  },
};
</script>