vue中使用echart

前言
在vue中使用echart，不用监听窗口自适应。节省代码量。
参考路径 https://github.com/ecomfe/vue-echarts

1.安装依赖
本项目使用的是vue2，根据提示安装。
注意：echarts 安装最新版

1.npm install echarts vue-echarts
要求 echarts 版本5以上
2.npm i -D @vue/composition-api@1.1.4
或着先安装composition-api然后package.json更改版本号;最后npm i

2.使用

<template>
  <div class="container-box">
    <div class="layout-left">
      <div class="layout-top">
        <v-chart class="chart" :option="option1" autoresize />
      </div>
      <div class="layout-bottom">
        <v-chart class="chart" :option="option2" autoresize />
      </div>
    </div>
    <div class="layout-right">
      <div class="layout-top"></div>
      <div class="layout-bottom"></div>
    </div>
  </div>
</template>

<script>
// echarts插件
import ECharts from "vue-echarts";
import { use } from "echarts/core";

import { CanvasRenderer } from "echarts/renderers";
import { BarChart, PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default {
  data() {
    return {
      option1: {},
      option2: {},
      option3: {},
      option4: {},
    };
  },
  components: {
    "v-chart": ECharts,
  },
  created() {
    this.pieDome1();
    this.pieDome2();
  },
  methods: {
    pieDome1() {
      this.option1 = {
        title: {
          text: "会员数据统计",
          subtext: "动态数据",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          orient: "vertical",
          left: "left",
          data: ["微信访问", "公众号访问", "扫码进入", "分享进入", "搜索访问"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "微信访问" },
              { value: 310, name: "公众号访问" },
              { value: 234, name: "扫码进入" },
              { value: 135, name: "分享进入" },
              { value: 1548, name: "搜索访问" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    // 饼图文字有小圆点
    pieDome2() {
      this.option2 = {
        backgroundColor: "transparent",
        color: ["#cd4692", "#9658c3", "#6c6be2", "#01aebf", "#18b794"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}$ ({d}%)",
          textStyle: {
            fontSize: 16,
          },
        },
        legend: {
          data: ["A", "B", "C", "D", "E"],
          orient: "vertical",
          right: "5%",
          top: "13%",
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 30,
          textStyle: {
            color: "#",
            fontSize: 16,
          },
        },
        series: [
          {
            name: "TITLE",
            type: "pie",
            clockwise: false,
            startAngle: 90,
            radius: "75%",
            center: ["44%", "50%"],
            hoverAnimation: false,
            roseType: "radius", //area
            data: [
              {
                value: 335,
                name: "A",
              },
              {
                value: 310,
                name: "B",
              },
              {
                value: 234,
                name: "C",
              },
              {
                value: 135,
                name: "D",
              },
              {
                value: 148,
                name: "E",
              },
            ],
            itemStyle: {
              //   鼠标移入加上阴影有3D感
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              //   扇形间隔
              normal: {
                borderColor: "#273454",
                borderWidth: "5",
              },
            },
            label: {
              show: true,
              position: "outer",
              alignTo: "labelLine",
              // ·圆点
              backgroundColor: "auto", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              // height,width.lineHeight必须为0
              distanceToLabelLine: 0, //圆点到labelline距离
              borderRadius: 5,
              padding: [5, -5, 5, -5],
              /*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几如：圆点半径为1*/
              // a是 title b是name c是value d是百分比
              formatter: "{a|{b}}{b|{d}}{c|%}",
              rich: {
                a: {
                  padding: [0, 5, 0, 15],
                },
                b: {
                  color: "#333",
                  padding: [0, 0, 0, 0],
                },
                c: {
                  color: "#333",
                  padding: [0, 12, 0, 0],
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../styles/common.less";
</style>

3.展示效果

4.
如果有渐变需要把new echarts.graphic.LinearGradient替换成this.$echarts.graphic.LinearGradient
在main.js中设置

// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts