echarts环形图--彩虹图--蚊香图

需要实现的效果图

分析如何实现

1、可以看到这个数据图标不是常规的echarts图，需要从echarts的更多资源去找类似的例子copy，找了一圈还真找到类似的如图：

2、例子找到了，大致也差不多，动手改。
3、两者之间的区别：
（1）圈的个数不同、颜色不同
（2）右侧文字字体的样式（字体、颜色等）

上代码

定义变量

//定义要用到的变量：series: [],maxRadius:  90,barWidth: 6,barGap: 2,// sumValue: 0,showValue: true,showPercent: true,option: {},
//图形数据PieDatas: [{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 95,"name": "XXXXXXXXXXXXXXXX完整率识别准确率"},{"value": 95,"name": "XXXXXXX完整率时钟准确率"},{"value": 95,"name": "车XXXXXXXXXX数据XXXXXXXXXX完整率上传率"},{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率上传率"},{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率可用率"},{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率用率"},],
//图形颜色BarColor:  [{"color1": "#4E9DFF","color2": ""},{"color1": "#36C4F7","color2": ""},{"color1": "#65D4AB","color2": ""},{"color1": "#9FFF8D","color2": ""},{"color1": "#FFE154","color2": ""},{"color1": "#FFB854","color2": ""},{"color1": "#FF9254","color2": ""},{"color1": "#FF8181","color2": ""},{"color1": "#FF81BA","color2": ""},{"color1": "#DC81FF","color2": ""},],

绘制图形

this.pieDatas.map((item, i) => {this.series.push({type: 'pie',clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [(this.maxRadius - i * (this.barGap + this.barWidth)) + '%', (this.maxRadius - (i + 1) * this.barWidth - i * this.barGap) + '%'],center: [ "30%", "50%"],label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: item.value,name: item.name,itemStyle: {color: this.barColor[i].color1}}, {value: 100 - item.value,name: '',itemStyle: {color: "transparent",},tooltip: {show: false},hoverAnimation: false}]})this.series.push({name: 'blank',type: 'pie',silent: true,z: 0,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [(this.maxRadius - i * (this.barGap + this.barWidth)) + '%', (this.maxRadius - (i + 1) * this.barWidth - i * this.barGap) + '%'],center: [ "30%", "50%"],label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: 1,itemStyle: {color: "#f7f7f7",//圆圈另一半的颜色borderWidth: 0},tooltip: {show: false},hoverAnimation: false}]});})this.option = {grid: {left:  0,right:  0,top:  0,bottom:  0,},backgroundColor: '#fff',tooltip: {show: true,trigger: "item",},legend: {//右侧文字show: true,left: '50%',top: 'middle',icon: "circle",itemWidth: 6,itemHeight: 8,itemGap:  5,textStyle: {//右侧字体样式rich: {bothNameValue: {width: 300,  //给文字设置统一长度，保证右侧的百分比对齐},title: {fontSize: 14,lineHeight: 16,color: '#999999',width: 260,},value: {color: '#489DF7',fontSize: 18,fontFimely: 'DIN Alternate'}}},formatter: (name) => {var datas = this.pieDatas;let total = 0;datas.map(item => {total += (item.value - 0)})let valueIndex = datas.map(item => item.name).indexOf(name);let htmlValue = this.showPercent ? datas[valueIndex].value + "%" : ''return "{title|" + name +  "} {value|" + htmlValue + "}"// return name + "  " + (this.showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');} ,},series: this.series,}//最后把option放到echarts中就可以了
this.myChart.setOption(this.option);

最后

按照代码可以做出一样的图表出来，无脑复制会吧各位大佬。

echarts环形图--彩虹图--蚊香图相关推荐

修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts 环形图
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts 环形进度图
#echarts 环形进度图 #效果图 #上代码 data = [{name: '发票管理',value: 360,},{name: '纳税申报',value: 252,},{name: '综合服务' ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
echarts 3d饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
基于ECharts+百度地图开发散点扩散图
基于ECharts+百度地图开发散点扩散图用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件下载地址为:http://echarts.bai ...
灰度图转换成彩色图和彩虹图
把灰度图转换成彩色图和彩虹图 1. 灰度图转换成彩色图 void Gray2Color(const cv::Mat const &src, cv::Mat &dst){ dst ...
jfreechart折线图+柱状图、柱状图(堆叠)+折线图、饼状图、环形图
记录jfreechart生成图片测试程,主要是为自己研究过之后的记录:) 折线图+柱状图柱状图(堆叠)+折线图获取饼状图获取环形图 jar包下载地址:https://download.csdn. ...

echarts环形图--彩虹图--蚊香图

需要实现的效果图

分析如何实现

上代码

定义变量

绘制图形

最后

echarts环形图--彩虹图--蚊香图相关推荐

最新文章

热门文章