echarts积累之--图表下钻

echarts图标下钻的原理：点击图表 -> 销毁echarts（myChart.dispose()） -> 创建新的echarts（echarts.init） -> 替换数据源（setOption）（始终是一个图表，不断的销毁-创建-替换数据源来做到下钻和回到初始状态）

<template><ColumnarLine height="740px" ref="trendBar" @click="openDetail"></ColumnarLine>
</template>
<script>
import ColumnarLine from '../../components/echart/ColumnarLine.vue'// echarts图标下钻的原理：（始终是一个图标，不断的销毁创建替换数据源来做到下钻和回到初始状态）
// 点击图表 -> 销毁echarts（myChart.dispose()） -> 创建新的echarts（$echarts.init） -> 替换数据源（setOption）
export default {components: { ColumnarLine },data() {return {currentBarInfo: {"title": {"text": ""},"tooltip": {"trigger": "axis"},"grid": {"left": "1%","right": 20,"bottom": "1%","containLabel": true},"xAxis": {"type": "value"},"yAxis": {"type": "category","data": ["张三","王哈哈","李四"],"inverse": true},"dataGroupId": "","animationDurationUpdate": 500,"color": ["#FFC542","#3DD598","#50B5FF"],"series": [{"type": "bar","name": "指标一","data": [{"value": 0,"groupId": "692469305737625540"},{"value": 39,"groupId": "1248743218"},{"value": 0,"groupId": "1486903246635360331"}],"universalTransition": {"enabled": true,"divideShape": "clone"}},{"type": "bar","name": "指标二","data": [{"value": 0,"groupId": "692469305737625540"},{"value": 76,"groupId": "1248743218"},{"value": 0,"groupId": "1486903246635360331"}],"universalTransition": {"enabled": true,"divideShape": "clone"}},{"type": "bar","name": "指标三","data": [{"value": 0,"groupId": "692469305737625540"},{"value": 0,"groupId": "1248743218"},{"value": 0,"groupId": "1486903246635360331"}],"universalTransition": {"enabled": true,"divideShape": "clone"}}]}};},mounted() {// 第一层的图表this.$refs['trendBar']?.drawEcharts(this.currentBarInfo);},methods: {// 点击下钻openDetail() {this.reDraw({customerId: 1248743218, customerName: "王哈哈"})},// 下钻处理reDraw(parms={}){let {customerId, customerName} = parms;let list = [{"yearDay": 20230217,"yearMoth": 202302,"yearFull": 2023,"customerId": "1248743218","customerName": "王哈哈","departId": 697991942,"allotNum": 17,"handleNum": 36,"timeoutNum": 0,"checkNum": 35},{"yearDay": 20230218,"yearMoth": 202302,"yearFull": 2023,"customerId": "1248743218","customerName": "王哈哈","departId": 697991942,"allotNum": 9,"handleNum": 23,"timeoutNum": 0,"checkNum": 14},{"yearDay": 20230219,"yearMoth": 202302,"yearFull": 2023,"customerId": "1248743218","customerName": "王哈哈","departId": 697991942,"allotNum": 0,"handleNum": 0,"timeoutNum": 0,"checkNum": 0},{"yearDay": 20230220,"yearMoth": 202302,"yearFull": 2023,"customerId": "1248743218","customerName": "王哈哈","departId": 697991942,"allotNum": 0,"handleNum": 0,"timeoutNum": 0,"checkNum": 0},{"yearDay": 20230221,"yearMoth": 202302,"yearFull": 2023,"customerId": "1248743218","customerName": "王哈哈","departId": 697991942,"allotNum": 4,"handleNum": 8,"timeoutNum": 0,"checkNum": 6},{"yearDay": 20230222,"yearMoth": 202302,"yearFull": 2023,"customerId": "1248743218","customerName": "王哈哈","departId": 697991942,"allotNum": 5,"handleNum": 5,"timeoutNum": 0,"checkNum": 3},{"yearDay": 20230223,"yearMoth": 202302,"yearFull": 2023,"customerId": "1248743218","customerName": "王哈哈","departId": 697991942,"allotNum": 4,"handleNum": 4,"timeoutNum": 0,"checkNum": 0}]let tips = '每日';let onlineType = 'day'// repainChart是组件里面的自定义事件，主要干销毁/创建/替换数据源几件事this.$refs['trendBar']?.repainChart({title:[{text: customerName+` - ${tips}指标一`,textStyle: {fontSize: 18, fontWeight: 'normal' },top: 40 // 设置标题的位置},{text: customerName+` - ${tips}指标二`,textStyle: {fontSize: 18, fontWeight: 'normal' },top: 280},{text: customerName+` - ${tips}指标三`,textStyle: {fontSize: 18, fontWeight: 'normal' },top: 530},],legend: {show: false},tooltip: {trigger: 'axis',valueFormatter: (value) => value},color: ['#FFC542', '#3DD598', '#50B5FF'],xAxis: [ // gridIndex: x 轴所在的 grid 的索引，默认位于第一个 grid{type: 'category',gridIndex: 0,top: 40, bottom: '33%', left: 5, data: list.map(item=>item[onlineType == 'day'?'yearDay':'yearMoth'])},{type: 'category',top: '34%', bottom: '66%', left: 5,gridIndex: 1,data: list.map(item=>item[onlineType == 'day'?'yearDay':'yearMoth'])},{type: 'category',top: '67%', bottom: '100%',  left: 5,gridIndex: 2,data: list.map(item=>item[onlineType == 'day'?'yearDay':'yearMoth'])}],grid: [ // 设置图表位置{top: 80, left: 30,  right: 30,  height: 150},{top: 320, left: 30,  right: 30,   height: 150},{top: 570, left: 30,  right: 30,  height: 150}],yAxis:[{type: 'value', gridIndex: 0},{type: 'value', gridIndex: 1},{type: 'value', gridIndex: 2}],series: [{type: 'bar',name:"指标一",gridIndex: 0,xAxisIndex: 0,yAxisIndex: 0,dataGroupId: customerId,data: list.map(item=>item.allotNum||0),universalTransition: { // 全局过渡动画配置enabled: true, // enableddivideShape: 'clone'}},{type: 'bar',name:"指标二",gridIndex: 1,xAxisIndex: 1,yAxisIndex: 1,dataGroupId: customerId,data: list.map(item=>item.handleNum||0),universalTransition: {enabled: true,divideShape: 'clone'}},{type: 'line',dataGroupId: customerId,name:"指标三",gridIndex: 2,xAxisIndex: 2,yAxisIndex: 2,data: list.map(item=>item.timeoutNum||0),universalTransition: {enabled: true,divideShape: 'clone'}}],graphic: [{type: 'text',left: 0,top: 0,style: {text: 'Back',fontSize: 20,},onclick: (e)=> {// 添加重置事件，用于回到初始图表this.$refs['trendBar']?.drawEcharts(this.currentBarInfo)}}]})}},
};
</script>

效果：

下钻效果图：

注（柱状图组件--vue3写法）：

<template><!-- 柱折结合 --><div :id="echartsId" :style="{ height }"></div>
</template><script lang="ts" setup>// 引入部分import { defineComponent, reactive, toRefs,getCurrentInstance, ref, onMounted} from 'vue';const { proxy } = getCurrentInstance()// propsconst props = defineProps({echartsId: { //IDtype: [String, Number],default: 'myecharts'},height: {type: String,default: '370px'},})const emit= defineEmits(['click'])let myChart = null;// 方法const drawEcharts = function(echartConfigure) {if(myChart != null && myChart != "" && myChart != undefined){myChart.dispose(); // 存在echarts时，销毁}myChart = proxy.$echarts.init(document.getElementById(props.echartsId));myChart.setOption({title: Object.assign({text:"",  textStyle: {fontSize: 18, fontWeight: 'normal' }},echartConfigure.title||{text:""}),tooltip: Object.assign({trigger: 'axis',textStyle:{align:'left'},axisPointer: {type: 'cross',crossStyle: {color: '#999', //鼠标水平线颜色}}},echartConfigure.tooltip),grid: Object.assign({ //留个占位，后面再配},echartConfigure.grid),dataset: echartConfigure.dataset||[],dataGroupId: echartConfigure.dataGroupId||'',animationDurationUpdate: echartConfigure.animationDurationUpdate||0,toolbox: {show: false, //不展示右上角按钮},color : echartConfigure.color, //颜色配置legend: echartConfigure.legend||{},xAxis: echartConfigure.xAxis||[],yAxis: echartConfigure.yAxis||[{type: 'value'},{type: 'value'},],series: echartConfigure.series||[]});// 添加点击事件myChart.on('click', function (event) {emit('click',event)})}// const repainChart = function(options){myChart = proxy.$echarts.init(document.getElementById(props.echartsId));myChart.setOption(options)}// 暴露给父组件使用defineExpose({// 声明方法drawEcharts,repainChart})</script><style scoped lang="less"></style>

例二：

<template><div :id="echartsId" :style="{ height }"></div>
</template>
<script lang="ts" setup>
// 引入部分
import { getCurrentInstance, onMounted, ref } from "vue";
import chinaGeo from "@/assets/json/china.json";
const { proxy } = getCurrentInstance();// props
const props = defineProps({echartsId: {//IDtype: [String, Number],default: "chinaEcharts",},height: {type: [String, Number],default: "300px",}
});
const baseOption=ref({title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 735, name: 'Direct' },{ value: 1048, name: 'Search Engine' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}],})
// 生命周期
let myChart = null;
const drawMap = function (echartConfigure) {if(myChart != null && myChart != "" && myChart != undefined){myChart.dispose(); }myChart = proxy.$echarts.init(document.getElementById(props.echartsId));proxy.$echarts.registerMap("china", chinaGeo); //省份数据myChart.setOption(baseOption.value);myChart.on('click', function (event) {repainChart({title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 735, name: 'Direct' },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}],graphic: [{type: 'text',left: 0,top: 80,style: {text: 'Back',fontSize: 20},onclick: function (e) {drawMap(baseOption.value)}}]})})
};const repainChart = function(options){myChart = proxy.$echarts.init(document.getElementById(props.echartsId));myChart.setOption(options)}
defineExpose({drawMap,
});
</script><style scoped lang="less">
</style>

echarts积累之--图表下钻相关推荐

echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
php mysql echarts动态生成图表
php mysql echarts动态生成图表,数据库和表格使用的java Servlet echarts 图表生成的一样数据,不知道的看我前面一篇博文:需要两个文件完成 1. 数据获取文件 week ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html <script src="js/4.2.1/echarts.min.js"></script&g ...
java——插件echarts数据可视化图表库
插件echarts数据可视化图表库一.使用idea创建javaWeb工程二.下载echarts导入js文件三.使用echarts. 特别鸣谢:感谢林老师传授嘿嘿嘿 -------- 创作不易, ...
Spring Boot 实践折腾记（20）：Thymleaf + webjar + ECharts 构建本地图表
前言作为geek后端程序员,画图的选择其实有很多,手画,excel,ppt,copy别人的图等.虽然用excel最方便,但是类似按中国省份来显示详细数据的图,excel是画不了的,而PPT画起来又很 ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
数据分析可视化04 图表组件：Echarts数据可视化图表基础
本课时是课程的第二个模块,环境部署篇的第一个课时.在第一部分的基础理论篇,我向你介绍了数据可视化分析的概念定义.方法体系和关键技术.接下来,我会带你了解基于开源框架,如何部署数据可视化分析的开发环境, ...

echarts积累之--图表下钻

echarts积累之--图表下钻相关推荐

最新文章

热门文章