echarts-半圆

制作半圆：用到echarts，并用markline制作了4条标线

 var data = [];
var banyuanData=[{typename: '项目一', count: 45756, color: ['#1eabfd', '#01f5fe']}, { typename: '项目二', count: 32846, color: ['#5ae190', '#7ffe56']},{ typename: '项目三', count:11623, color: ['#a35afd', '#e785fd']}];banyuanData.forEach(function (items, index) { data.push({ name: items.typename, value: items.count, textStyle: { fontSize: 24,},color: items.color,})})var arrName = getArrayValue(data, 'name');var arrValue = getArrayValue(data, 'value'); for (var i = 0; i < arrName.length; i++) { var sumValue = eval(arrValue.join('+'));//总和} var optionData = getData(data) function getArrayValue(array, key) {var key = key || 'value'; var res = []; if (array) { array.forEach(function (t) { res.push(t[key]);});} return res;} function getData(data) {var res = { series: [], yAxis: []}; var xPosition = ['50%', '43%', '50%'] var yPosition = ['60%', '50%', '42%'] for (let i = 0; i < data.length; i++) {res.series.push({name: data[i].item, type: 'pie', clockWise: false, //顺时加载  hoverAnimation: false, //鼠标移入时不变大  radius: [93 - i * 13,98 - i * 13], //半径：每个半圆的半径相差13center: ['50%', '50%'], label: {show: false,}, itemStyle: { label: { show: false,}, labelLine: { show: false  },}, data: [{ value: data[i].value, name: data[i].name, 'itemStyle': { //半圆的样式'normal': { 'color': { type: 'linear', x: 0, y: 0,x2: 0, y2: 1, colorStops: [{ offset: 0, color: data[i].color[0] // 0% 处的颜色  },  { offset: 1, color: data[i].color[1] // 100% 处的颜色 }]},'borderWidth': 0 },},hoverAnimation: false,//鼠标悬浮时不放大  }, {value: sumValue - data[i].value, //另一个半圆：显示为透明name: '',itemStyle: { color: 'rgba(0,0,0,0)',borderWidth: 0 },tooltip: { show: false  }, hoverAnimation: false,}], markLine: { //添加竖杠---图表标线silent: false, symbol: 'none', data: [[{ name: (data[i].value / sumValue * 100).toFixed(2) + '%', x: xPosition[i], y: yPosition[i]},{x: '80%', y: yPosition[i]}]],label: { color: data[i].color[0], fontSize: 24,}, lineStyle: {color: data[i].color[0], type: 'solid'  }}}) res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + '%');} res.series.push({name: '1', type: 'pie', markLine: { //图表标线silent: false, symbol: 'none', data: [[{ name: '', x:  '50%', y: '38%'},{x: '50%', y: '43%'}]],label: { // color: data[i].color[0], fontSize: 24,}, lineStyle: {color: '#4e607b', width:5,type: 'solid'  }}})return res;} option =  {  grid: {top: '0%',bottom: '0%',left: '0%', height: '0%',// 高度  containLabel: false  }, series: optionData.series };

echarts-半圆相关推荐

echarts中半圆的环形进度图形
echarts中半圆的环形进度图形效果如图: 一.html代码如下: <div id="pieDiagram1" style="width:330px;heigh ...
tips:使用echarts构建一个半圆环形图
前言大名鼎鼎的echarts中有一些有趣的图表,其中饼图(pie)可以衍生出南丁格尔图(玫瑰图),而改变饼图的内外半径又可以使饼图变成一个圆环图,于是问题来了,怎么生成一个半圆形的圆环图呢?首先我们 ...
echarts中的散点图极坐标系展现上半圆时钟图
1.应用场景项目中需要实现下图红框中的上半月类似时钟的设计图,其中'90'和'3'都是动态变化的(后端返回的数据).设计图中白色大头针的个数随着分数的增减而顺时针增减,浅蓝色的大头针随着分数的增减而 ...
echart 圆饼图显示单位_玩转ECharts之实现“1/2圆的玫瑰图”
前言玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些&qu ...
ECharts数据可视化饼状图(环形图-进度半圆形)
销售进度 (quarter) -饼状图实现步骤: 寻找官方的类似示例,给予分析,引入到HTML页面中按照需求来定制它. 链接: 环形图. 完整js代码 // 销售模块饼形图半圆形设置方式 ( ...
vue使用echarts图表小结
vue使用echarts图表小结仪表盘曲线图三曲线双曲线柱状图柱状图一柱状图二饼图饼图一饼图二饼图三其他树状水球注:部分效果为动图叠加仪表盘 const getOpti ...
数据可视化(ECharts)
DAY01-可视化项目 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们 ...
数据可视化Echarts—— 案例：立可得-智能看板
案例:立可得-智能看板项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引入 '立 ...
echarts仪表盘样式设置
function fillpan(obj){var myChart1 = echarts.init($(obj.id)[0]);var option = {backgroundColor: " ...
数据可视化 - Echarts图表
可视化项目代码 - - > 底部 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据 ...

echarts-半圆

echarts-半圆相关推荐

最新文章

热门文章