echarts实现柱图的下钻功能

1、确保已安装了cnpm,使用cnpm命令安装echarts：

cnpm install echarts --save

2、在main.js文件中，全局引入echarts：

import * as echarts from "echarts";
// 开启echarts
Vue.prototype.$echarts = echarts;

3、创建柱状图test.vue文件

<template><div><a-button type="primary" @click="back" style="margin-left: 30px">返回</a-button><div id="main" class="box-pie" style="height: 500px" ref="chart"></div></div>
</template><script>//引入的调用后台封装的方法getAction，根据自己的项目引入import {downFile, getAction, httpAction, postAction} from "@api/manage";export default {name: "test",data() {return {char: null,option: {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},yAxis: {type: 'category',data: []   //后台加载数据// data: ['浙江全省', '杭州', '宁波', '温州', '金华', '嘉兴', '绍兴', '台州', '湖州', '丽水', '衢州', '舟山']},xAxis: {type: 'value'},dataGroupId: '',animationDurationUpdate: 500,series: [{name: '已完成',type: 'bar',stack: 'total',label: {show: true},data: [] //后台加载数据// data: [780, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 200, 350]},{name: '未完成',type: 'bar',stack: 'total',label: {show: true},data: [] //后台加载数据// data: [600, 132, 101, 134, 90, 230, 210, 330, 320, 134, 90, 90]}]}}},mounted() {this.getPage();},methods: {getPage() {//初始化chart模块this.chart = this.$echarts.init(this.$refs.chart);//后台返回数据，可以根据自己的业务逻辑返回let shiQuNameArray = [];let shiQuHandleData = [];//市区级别已完成任务个数let shiQuNoHandleData = [];//市区级别未完成任务个数let allprovinceName;//全省名称let provinceName;//省检验中心数据let param = {};getAction(url, param).then(res => {if (res.success) {let project = res.result.records || res.result;allprovinceName = project.allprovinceName;provinceName = project.provinceName;if (allprovinceName != null && allprovinceName != "") {shiQuNameArray.push(project.allprovinceName);//判断全省名称是否存在shiQuHandleData.push(project.allhandleNummber);shiQuNoHandleData.push(project.allnohandleNummber);}if (provinceName != null && provinceName != "") {shiQuNameArray.push(project.provinceName);shiQuHandleData.push(project.provinceHandleNummber);shiQuNoHandleData.push(project.provinceNohandleNummber)}if (project.shiQuList != null) {for (let i = 0; i < project.shiQuList.length; i++) {shiQuNameArray.push(project.shiQuList[i].shiQuareaName);shiQuHandleData.push(project.shiQuList[i].shiQuhandleNummber);shiQuNoHandleData.push(project.shiQuList[i].shiQunoHandleNummber);}}//获取后台数据后设置optionthis.option.yAxis.data = shiQuNameArray;this.option.series[0].data = shiQuHandleData;this.option.series[1].data = shiQuNoHandleData;this.chart.setOption(this.option);}})//点击某个柱状图const that = this;that.chart.on('click', function (object) {//获取到市级名称//排除点击全省，不下钻，（object.name是柱状图的名称，根据名称判断点击的是那个市区）if (object.name) {if (object.name == allprovinceName || object.name == provinceName) {return;}//只有市级别的才实现下钻，排除点击县区级别情况if (!shiQuNameArray.includes(object.name)) {return;}//再次从后台获取数据,根据自己后台返回数据进行解析let xianQuNamelist = [];let xianQuHandleNum = [];let xianQuNoHnandleNum = [];getAction(url, param).then(res => {if (res.success) {let project = res.result.records || res.result;       for (var i = 0; i < project.shiQuList.length; i++) {//如果匹配到市区名称,筛选出对应的县区信息if (object.name == project.shiQuList[i].shiQuareaName) {for (var j = 0; j < project.shiQuList[i].xianQuList.length; j++) {xianQuNamelist.push(project.shiQuList[i].xianQuList[j].xianQuareaName);xianQuHandleNum.push(project.shiQuList[i].xianQuList[j].xianQuhandleNummber);                     xianQuNoHnandleNum.push(project.shiQuList[i].xianQuList[j].xianQuhandleNummber);}break;}}}//如果县区级别数据为0，则阻止下钻功能if (xianQuNamelist.length == 0) {return;}//再次设置optionthat.chart.setOption({tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},yAxis: {type: 'category',data: xianQuNamelist//从后台获取的县区名称       },xAxis: {type: 'value'},dataGroupId: '',animationDurationUpdate: 500,series: [{name: '已处理',type: 'bar',stack: 'total',label: {show: true},data: xianQuHandleNum //从后台获取的县区已完成数量             {name: '未处理',type: 'bar',stack: 'total',label: {show: true},data: xianQuNoHnandleNum  //从后台获取的县区未完成数量    }],});})     }});},back() {//点击返回按钮，从新显示之前数据const that = this;that.chart.setOption(that.option);}}}
</script>
<style scoped>
</style>

4、引用test模块

<template><div class="page-header-index-wide"><a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}"><div class="salesCard"><a-tab-pane loading="true" tab="各市区数据" key="1"><test ref="test"></test></a-tab-pane>   </div></a-card></div>
</template><script>//引入test文件import test from "@/components/chart/test"export default {name: "IndexChart",components: {test},data() {return {}, }}
</script>
<style lang="less" scoped>
</style>

5、实现效果：
第一次加载数据加载的结果

点击其中一条后，实现市区对应下面县区数据，实现下钻功能。

点击返回按钮，即可返回第一次加载的数据。

echarts实现柱图的下钻功能相关推荐

echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
echarts象形柱图自定义样式（类似柱状图）
象形柱图是可以设置各种具象图形元素(如图片.SVG PathData 等)的柱状图,往往用在信息图中,用于有至少一个类目轴或时间轴的直角坐标系上. 先上一个简单的效果: 其实实现思路主要在于:绘制具有 ...
echarts 象形柱图pictorialBar
象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形1.配置datadata:[{value:n,symbol:'circle', 自定义图 ...
echarts 折柱图混合，使用数据集dataset，并且改变tooltip中圆点的样式
echarts使用数据集dataset时, 改变tooltip中圆点的样式如图: options: {color: ['#6666ff', '#66cc99', '#ff6600', '#ffcc3 ...
echarts象形柱图的图标怎么更改
在echarts官网找一个例子,如上图示: 下载好需要的图标,搜索base64图片在线转码,上传本地下载的图片(这边是随便找了一个),将转码后的Ctrl+A全部复制(编码太多了echarts官网容易卡 ...
【echarts】柱图+折线图
// 数据项 powerUse: {realTime: [1, 2, 4, 6],history: [9, 9, 3, 4],dataX: ['2时', '4时', '6时'] } drawChart ...
echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录先看实现效果:编辑步骤一安装echarts和echarts-gl 步骤二设置地图容器在methods中设置初始化地图方法并在mounted中调用在methods中设置初始化地图方法 ...
Echarts饼图实现圆形柱图
一.代码简介本次主要是在Vue web项目中,利用Echarts中的饼图组件实现圆形柱状图二.功能预览三.示例代码 <template><div id="echart ...
react echarts 绘制带有滑块柱图
实现效果图如下: 需要具备知识: 1 react 项目创建 2 react组件的导入使用方法:react中引入 TrafficColumnQTI 组件<TrafficColumnQTI /&g ...

echarts实现柱图的下钻功能

echarts实现柱图的下钻功能相关推荐

最新文章

热门文章