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>
  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值