echarts实现半圆饼图

var myChart = this.$echarts.init(document.getElementById('myChart'))let data = [{value: 57,name: '半年分配',itemStyle: {normal: {color: '#087EE0',label: {show: true,formatter: '{c}%',textStyle: {color: '#fff'}}}}},{value: 14,name: '按月分配',itemStyle: {normal: {color: '#79ADF9',label: {show: true,formatter: '{c}%',textStyle: {color: '#fff'}}}}},{value: 29,name: '到期分配',itemStyle: {normal: {color: '#C4D5FF',label: {show: true,formatter: '{c}%',textStyle: {color: '#fff'}}}}}]var a = 0for (let i = 0; i < data.length; i++) {a += data[i].value}data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,.0)'}}})let option = {series : [{name: '产品分配方式',type: 'pie',startAngle:-180,radius : '55%',center: ['50%', '60%'],data:data,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},label: {normal: {show: true,position: 'inside',formatter: '{c}%'}}}]}myChart.setOption(option)

参考文章：http://gallery.echartsjs.com/editor.html?c=xH1h_3TvEx

echarts实现半圆饼图相关推荐

前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
Echarts之圆饼图用法
Echarts之圆饼图用法 css代码 html代码 js代码 css代码 #chartone {float: left;margin-left: -50px;height: 159px;width: ...
Obiee+echarts实例之饼图（2）
一.效果图 1.这是用Obiee + echarts做出来的饼图,效果如图: 2.数据(仅供参考),如图: 二.代码解析 //前缀  <s ...
echarts中半圆的环形进度图形
echarts中半圆的环形进度图形效果如图: 一.html代码如下: <div id="pieDiagram1" style="width:330px;heigh ...
vue中用echarts实现复合饼图，带关系连接线
1.拿到产品原型图,需求中有这样一个图表 2.翻看echart的饼图示例,没有这种复合饼图,只有一个嵌套饼图 3. 于是网上查网友的文章,查到两篇类似的贴子,(52条消息) echarts模仿exce ...
【Echarts】- 制作饼图
效果大概是这样步骤分析封装好函数,为后续传入真实数据做准备初始化echarts 设置配置项,空的 option 即可创建图表查找官方示例按需求,自定义配置图表第一步:e ...
echarts的圆饼图自定义颜色
圆饼图自定义颜色 1.在HTML中的代码: <div id="echartZB" style="width:400px;height:600px;margin-le ...
ECharts常用图表饼图
1.图表4 饼图 1.1.饼图的实现步骤步骤1 ECharts 最基本的代码结构此时 option 是一个空空如也的对象步骤2 准备数据步骤3 准备配置项在 series 下设置 type: ...
echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示
项目中遇到这种需求,有两种解决方法, 一.在echarts的配置手册中搜graphic属性,并配置,可以在圈内显示固定的文字 graphic: [{ //环形图中间添加文字type: 'text', ...

echarts实现半圆饼图

echarts实现半圆饼图相关推荐

最新文章

热门文章