Echarts中树状图的使用

最新推荐文章于 2024-09-02 10:16:16 发布

有梦想的笨笨

最新推荐文章于 2024-09-02 10:16:16 发布

阅读量1.1k

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/2201_75474092/article/details/137961724

版权

本文介绍了如何在Vue项目中安装并使用ECharts库创建动态树状图，包括数据获取、x轴和y轴配置、系列数据的堆叠以及响应式调整。详细步骤指导了如何在mounted生命周期钩子中初始化和渲染图表，以及处理窗口大小改变和点击事件。

摘要由CSDN通过智能技术生成

序言

动态树状图

(由于分类信息完整数太少导致堆叠树状图肉眼不显示)

那么怎么实现上面的树状图效果呢,希望下面的内容能够帮到你

正文

安装 echarts 并引入

安装命令

$ npm install echarts --save

全局引入/部分引入

全局引入

在main.js中导入echarts

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

或在需要使用的页面引入

import * as echarts from "echarts";

使用echarts渲染树状图

在mounted执行echarts的初始化和渲染

mounted() {
this.initEcharts();
}

在methods写入

initEcharts() {
//数据是请求来时必须这样使用,避免渲染时请求还未发出导致渲染失败 
      this.$http.get("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org").then(({ data: { data } }) => {
        this.myBarchart = echarts.init(document.getElementById("myBarchart"));
        //这里是x轴坐标,可自定义
        let xData = data.categoryStatsDatas.map(item => item.resiCategoryName)
//
        let option = {
          backgroundColor: '#fff',//背景色
          color: ['#448cf6', '#f7ca60',],//图表中的颜色方案,两种颜色的代码块
          tooltip: {
            trigger: 'axis',//当鼠标移动到数据系列上时触发提示框
            axisPointer: {
              type: 'shadow'//定义了提示框的样式阴影色
            }
          },
          //居中可点击的两个色块
          legend: {
            x: 'center',
            bottom: '8%',
            data: ['分类信息完整数', '分类信息不完整数']
          },
          grid: { //图表的位置
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          //配置y 轴（yAxis）的选项
          yAxis: [{
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#f2f2f2']
              }
            },
          }],
          //配置x 轴（）的选项
          xAxis: [{
            type: 'category',
            data: xData,
            axisLabel: {
                rotate: 50  // 设置旋转角度为45度
            }
          }],
          //配置图表中的数据系列
          series: [{
            name: '分类信息完整数',
            type: 'bar',
            stack: '总量',//设置数据的堆叠
            barWidth: '30px',
            data: data.categoryStatsDatas.map((item, index) => ({
              value: item.integratedNum,
              extraProperty: item.resiCategory
            })),
          },
          {
            name: '分类信息不完整数',
            type: 'bar',
            stack: '总量',
            barWidth: '30px',
            data: data.categoryStatsDatas.map((item, index) => ({
              value: item.nonIntegratedNum,
              extraProperty: item.resiCategory
            })),
          }
          ]
        };
        const resizeHandler = () => {
            this.myBarchart.resize();
        };
        this.myBarchart.setOption(option);
        window.addEventListener("resize", this.handleWindowResize);
        window.addEventListener("resize", resizeHandler);
        this.myBarchart.on("click", (e) => {
          this.$router.push({
            path: "/main/base-nonIntResi",
            query: {
              type:'nonIntegrity',
              resiCategory: e.data.extraProperty,
            }
          });
          // 

        });
      });
    },

结尾

****斜体样式