用vue二次封装一个echarts

最新推荐文章于 2024-07-31 17:01:29 发布

开心市民小李・ࡇ・

最新推荐文章于 2024-07-31 17:01:29 发布

阅读量1k

点赞数

分类专栏： echarts vue 文章标签： vue.js 前端 html css

本文链接：https://blog.csdn.net/weixin_44242623/article/details/106141630

版权

vue 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

目的:可以重复利用组件

封装组件

<template>
  <div :id="_id" class="echargraph"></div>
</template>

import Vue from "vue";
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
const Echarts = require("echarts");

 name: "chart",

 props: {
    _id: String,
    _titleText: String,
    _colorArr: Array,
    xAxisData: Array,
    yAxisMax: Number,
    yAxisInterval: Number,
    seriesData: Array,
    _yText: String,
    pieRadius: [String, Array, Number]
  },

 watch: {
    seriesData(val) {
      switch (this._yText) {
        case "radar":
          this.radar(this._id, this._titleText, this.seriesData);
          break;
      
      }
    }
  },

mounted() {
    switch (this._yText) {
      case "radar":
        this.radar(this._id, this._titleText, this.seriesData);
        break;
 
    }
  },

    //  雷达图
    radar(_id, _titleText, seriesData) {
      let myChart = Echarts.init(document.getElementById(_id));
      let legendData = [];
      seriesData.map(item => {
        legendData.push(item.name);
      });
      let option = {
        title: {
          text: _titleText
        },
        color: "rgba(183,225,232,0.8)",
        tooltip: {
          backgroundColor: "rgba(255,255,255,0.5)",
          textStyle: {
            color: "black" //设置文字颜色
          }
        },
        radar: {
          name: {
            textStyle: {
              color: "#333"
              // backgroundColor: "#999",
              // borderRadius: 3,
              // padding: [3, 5]
            }
          },
          indicator: [
            { name: "知识度", max: 6500 },
            { name: "任务力", max: 16000 },
            { name: "学习力", max: 30000 },
            { name: "服务力", max: 38000 },
            { name: "情感力", max: 52000 },
            { name: "销售力", max: 25000 }
          ]
        },
        series: [
          {
            type: "radar",
            areaStyle: {
              color: "rgba(183,225,232,0.8)" // 图表背景的颜色
            },

            data: seriesData
          }
        ]
      };
      myChart.setOption(option);
    },

调用组件


 components: {
        chart
    },

      <chart
          :_id="'newAndOld'"
          :_titleText="'分布比例图'"
          :_colorArr="visitorColor"
          :pieRadius="visitorRadius"
          :seriesData="visitorData"
          :_yText="'Pie'"
          class="shadows echargraph"
        ></chart>