echarts蚊香图

// 事件处理函数
export default {props: {// 需要传递的数据data: {type: Array,default() {return [{name: '本科及以上',value: 13211},{name: '高中',value: 42111},{name: '初中及以下',value: 81711}];}}},data() {return {// echarts对象myEchart: null,// echart的optionsoptions: {}};},// 创建元素mounted() {this.init();},// 销毁destroyed() {// 销毁图表this.destroyedChart();},methods: {// 设置默认参数setDefaultOptions(data) {const color = ['#4d33d4', '#0090ff', '#ffa200'];// 默认的参数this.options = {color: color,grid: {top: '16%',bottom: '62%',left: '33%',containLabel: false},legend: {show: true,icon: 'circle',itemWidth: 12,itemHeight: 12,bottom: 60,right: 40,textStyle: {fontSize: 18,color: '#cde1ff'}},yAxis: [{type: 'category',inverse: true,axisLine: {show: false},axisTick: {show: false},axisLabel: {formatter: function (params) {const item = data[params];return `{value|${item.value}件}{percent|${item.percent}}`;},interval: 0,inside: true,textStyle: {rich: {percent:{color: '#e6f1ff',fontSize: 20,// eslint-disable-next-line no-magic-numberspadding: [15, 0, 0, 10]},value: {color: '#e6f1ff',fontSize: 20,// eslint-disable-next-line no-magic-numberspadding: [15, 0, 0, 230]}}},show: true},data: []}],xAxis: [{show: false}],series: []};},/*** @description 初始化的方法* @name init* @return {*} 无*/init() {// 更新数据this.update(this.data);},/*** @description 刷新图表* @return {*} 无*/refresh() {if (this.myEchart) {this.myEchart.resize();}},/*** @description 设置图表的数据* @name getChartData* @param {object} data 参数* @return {*} 无*/update(data) {// 先判断数据是否存在if (!Array.isArray(data)) {return false;}// 如果不存在echartsif (!this.myEchart) {// 图表对象this.myEchart = window.echarts.init(this.$refs.jsEchart);// 绑定resize 事件this.bindResizeEvent();}// 设置默认参数this.setDefaultOptions(data);// 更新数据this.updateData(data);// 清空图表this.myEchart.clear();// 生成图表this.myEchart.setOption(this.options);},// 更新数据对象updateData(data) {const color = ['#4d33d4', '#0090ff', '#ffa200'];let sum = 0;const pieSeries = [];const lineYAxis = [];// 数据处理data.forEach((v) => {sum = sum + parseInt(v.value, 0);});const lineData = [[{x: '68%',y: 71,// eslint-disable-next-line no-magic-numberssymbolSize: [10, 10],lineStyle: {color: color[0], width:2}},{x: '35%',y: 71,symbolSize: [1, 1]}],[{x: '68%',y: 101,// eslint-disable-next-line no-magic-numberssymbolSize: [10, 10],lineStyle: {color: color[1], width:2}},{x: '35%',y: 101,symbolSize: [1, 1]}],[{x: '68%',y: 131,// eslint-disable-next-line no-magic-numberssymbolSize: [10, 10],// eslint-disable-next-line no-magic-numberslineStyle: {color: color[2], width:2}},{x: '35%',y: 131,symbolSize: [1, 1]}]];// 图表option整理data.forEach((v, i) => {pieSeries.push({type: 'pie',clockWise: false,hoverAnimation: false,// eslint-disable-next-line no-magic-numbersradius: [`${65 - i * 15}%`, `${57 - i * 15}%`],center: ['35%', '50%'],label: {show: false},data: [{value: v.value,name: v.name}, {value: sum - v.value,name: '',itemStyle: {color: '#051341'}}],markLine: {silent: true,lineStyle: {normal: {type: 'solid'}},label: {normal: {position: 'start',formatter: function (par) {return par.name;}}},data: lineData}});pieSeries.push({name: '',type: 'pie',silent: true,// 顺时加载clockWise: false,z: -1,// 鼠标移入变大hoverAnimation: false,// eslint-disable-next-line no-magic-numbersradius: [`${65 - i * 15}%`, `${57 - i * 15}%`],center: ['35%', '50%'],label: {show: false},data: [{value: 10,itemStyle: {color:'#051341'}}]});// eslint-disable-next-line no-magic-numbersv.percent = sum === 0 ? '0%' : `${(parseInt(v.value, 0) / sum * 100).toFixed(1)}%`;lineYAxis.push({value: i,textStyle: {rich: {circle: {color: color[i],// eslint-disable-next-line no-magic-numberspadding: [0, 5]}}}});});this.options.yAxis[0].data = lineYAxis;this.options.series = pieSeries;},// resize 事件处理函数resizeHandler() {if (this.myEchart) {this.myEchart.resize();}},/*** @description 绑定resize 事件* @name init* @return {*} 无*/bindResizeEvent() {// 绑定resize事件window.fdGlobal.on(window, 'resize', this.resizeHandler);},// 取消事件绑定unbindResizeEvent() {// 取消绑定resize事件window.fdGlobal.off(window, 'resize', this.resizeHandler);},/*** @description 销毁图表* @name destroyedChart* @return {*} 无*/destroyedChart() {// 如果存在echartsif (this.myEchart) {// 销毁实例，销毁后实例无法再被使用。this.myEchart.dispose();this.myEchart = null;// 取消事件绑定this.unbindResizeEvent();}}}
};

echarts蚊香图相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
html5 尾迹特效,如何设置ECharts线图的特效
您可以使用 ECharts 线图的 effect 属性来贵线特效进行配置,可以参考示例模拟迁徙和北京公交路线. 注意: 所有带有尾迹特效的图表需要单独放在一个层,也就是需要单独设置zlevel, ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 环状图中添加图片
echarts 环状图中添加图片由于业务需要,我们可以在饼图内加入图片.图标或文字等让单调的饼图变得美观,这里我是在环状图里添加图片. 代码如下: option = {graphic: {//图形中 ...
echarts 仪表盘图展示百分比
echarts 仪表盘图展示百分比效果图如下: 背景图一加,效果就好看多了代码: let myChart = echarts.getInstanceByDom(document.getElemen ...

echarts蚊香图

echarts蚊香图相关推荐

最新文章

热门文章