【vue】echarts 可视化图库的引入和使用

1、npm 下载 echarts

npm install echarts@4 --save

2、全局引入main.js或者按需引入

import echarts from "echarts";

3、创建一个容器 div ,并赋予一个 ref,之后要通过这个 ref 属性来建立图表实例

<div id="echart_type" style="height: 250px;" ref="articleEChart"></div>

4、创建图表实例,并进行配置

data() {
    return {
      //文章图例
      articleEChart: null,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    //初始化获取数据
    init() {
      //获取文章统计
      getArticleStatistics().then(res => {
        if (res.code === 200) {
          let data = res.rows
          //初始化文章图表实例,传入图表div的ref和配置
          this.articleEChart = echarts.init(this.$refs.articleEChart, "macarons");
          this.articleEChart.setOption({
            //提示的冒泡信息
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //具体的图表配置
            series: [
              {
                name: "获取文章统计",
                type: "pie",
                roseType: "radius",
                radius: [5, 70],
                center: ["50%", "38%"],
                data: data,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
              }]
          })
        }
      })
    }
  }

 

posted @   RikkaXl  阅读(132)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示