echarts 饼状图

实现效果

难题1 中间换行 \n
解决方法formatter:“{a}\n{c}”

难题2 中间设置不同的样式
解决方法

     emphasis: {label: {formatter: (param) => {let info = param.data;let str = `{count|${info.value}}\n{train|${info.name}}`; //这里对不同的内容进行标识 a，b，或者可以随便自己起个别的名字return str;},rich: { //在rich中对两个标识进行样式修改count: {fontSize: 24},train: {fontSize: 12,opacity: 0.6}},show: true,fontSize: '24',fontFamily: 'PangMenZhengDao',color: '#B0E1FF',}},

难题3 设置与原本不同的颜色
解决方法 itemStyle

itemStyle: {color: param => param.data.color // color自己定义的字段}

难题4左侧与默认不一样自定义文字
解决方法
参考链接https://blog.csdn.net/YPJMFC/article/details/78979319

 // 总揽legend: {orient: 'vertical',right: 11,top: 0,itemWidth: 9,itemHeight: 3,itemGap: 12, // 修改间距textStyle: {color: '#B0E1FF', fontSize: 16,rich: { //在rich中对两个标识进行样式修改train: {opacity: 0.8,padding: [0, 16, 0, 8], // 修改文字和图标距离},rate: {fontWeight: 'bold'}},},formatter: (name:string) => {var rate;for (var i = 0; i < this.errorData.length; i++) {if (this.errorData[i].name === name) {rate = this.errorData[i].rate;}}var arr = ['{train|'+name+'}{rate|'+(rate*100).toFixed(2)+'%}']return arr.join('\n')},},

难题5 想要实现中间总是显示（总数）的功能
解决办法一：
需要绑定鼠标滑入和滑出动态的设置title的内容
借鉴 https://blog.csdn.net/Kiruthika/article/details/124442303

 private mouseover (){(this.$refs.echarts as Echarts).chart.setOption({title: {text: ""}})}private mouseout (){(this.$refs.echarts as Echarts).chart.setOption({title: {text: this.total}})}

因为第一种方法有些时候会导致不局中
解决办法二：（推荐）
不使用title设置，直接使用label设置，但是在这个过程中遇到一个问题就是饼图 label 居中的时候会重叠

     label: {show: true,position: 'center',formatter: () => {return this.total},textStyle: {color: '#B0E1FF',fontSize: 24,fontWeight: 600}},

后来想到使用echarts的事件监听设置label。成功解决

 <echartsref="echarts":option="option"@mouseover="mouseover"@mouseout="mouseout"/>private mouseover (params:any) {(this.$refs.echarts as Echarts).chart.setOption({series: {label:{show: false}}});}private mouseout () {(this.$refs.echarts as Echarts).chart.setOption({series: {label:{show: true}}});}

以上总代码

private get option(): ECOption|any {return {title: {show:false// show: true,// text: this.total || '',// 具体放置位置// left: "20%",// top: "center",// textStyle: {//  color: '#B0E1FF', //  fontSize: 24,//   fontWeight: 600,//  },},// 总揽legend: {orient: 'vertical',right: '5%',top: 0,itemWidth: 9,itemHeight: 3,itemGap: 12, // 修改间距textStyle: {color: '#B0E1FF', fontSize: 16,rich: { //在rich中对两个标识进行样式修改train: {opacity: 0.8,padding: [0, 16, 0, 8], // 修改文字和图标距离},rate: {fontWeight: 'bold'}},},formatter: (name:string) => {let rate = this.errorData.filter(item=>item.name === name)[0].ratelet arr = ['{train|'+name+'}{rate|'+(rate*100).toFixed(2)+'%}']return arr.join('\n')},},// 饼状图series: [{type: 'pie',radius: ['60%', '90%'], // 外/内大小center: ['25%', '50%'], // 距离左/上 的距离avoidLabelOverlap: false,// label: {//  show: false,//  position: 'center',//  },label: {show: true,position: 'center',formatter: () => {return this.total},textStyle: {color: '#B0E1FF',fontSize: 24,fontWeight: 600}},emphasis: {label: {formatter: (param) => {let info = param.data;let str = `{count|${info.value}}\n{train|${info.name}}`; //这里对不同的内容进行标识 a，b，或者可以随便自己起个别的名字return str;},rich: { //在rich中对两个标识进行样式修改count: {fontSize: 24},train: {fontSize: 12,opacity: 0.5}},show: true,fontSize: '24',fontFamily: 'PangMenZhengDao',color: '#B0E1FF',}},labelLine: {show: false},data: this.errorData,itemStyle: {color: param => param.data.color}}]};}private get total():number{return this.data[this.activeTab].reduce((total,cur)=>{return cur['faults_count'] + total;},0)}private get errorData(){if(this.data[this.activeTab]){return this.data[this.activeTab].map((item,index)=>{return {value: item.faults_count,name: item.train_number,rate: item.faults_rate,color: this.defaultColorArray[index],icon: 'rect'}})}}private mouseover (params:any) {(this.$refs.echarts as Echarts).chart.setOption({series: {label:{show: false}}});}private mouseout () {(this.$refs.echarts as Echarts).chart.setOption({series: {label:{show: true}}});}

在组件中

const events = ['legendselectchanged','legendselected','legendunselected','legendscroll','datazoom','datarangeselected','timelinechanged','timelineplaychanged','restore','dataviewchanged','magictypechanged','geoselectchanged','geoselected','geounselected','pieselectchanged','pieselected','pieunselected','mapselectchanged','mapselected','mapunselected','axisareaselected','focusnodeadjacency','unfocusnodeadjacency','brush','brushselected','rendered','finished','click','dblclick','mouseover','mouseout','highlight','downplay','mousemove','mousedown','mouseup','globalout','contextmenu'];events.forEach(event => {this.chart.on(event, (params:any)=>{this.$emit(event,params) // //这里的params是图表节点的数据});});

想让其取消放大的动画
hoverAnimation:false

echarts 饼状图相关推荐

echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...
Echarts饼状图视觉引导线设置
如何设置饼状图引导线位置我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如: 如下外部引导线方式: 有内部引导线方式如何设置这两 ...

echarts 饼状图

echarts 饼状图相关推荐

最新文章

热门文章