已经封装好的环形图组件

直接在要用的vue文件中引用：

              <circleChart:id="chart4.id":width="chart4.width":height="chart4.height":bgColor="chart4.bgColor":circleData="chart4.circleData":color="chart4.color":echartData="chart4.echartData":title="chart4.title":series="chart4.series"/>

引入echarts

import * as echarts from "echarts"; //引入echarts

data中的代码：

 chart4: {id: "chart4",width: "100%",height: "270px",bgColor: "#fff",color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FC6679 " },{ offset: 1, color: "#FDC581 " }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#AF3ADB" },{ offset: 1, color: "#4E65DD" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FC6679" },{ offset: 1, color: "#FDC581" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#02CEFC" },{ offset: 1, color: "#0272ED" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#7FC268" },{ offset: 1, color: "#0BBBB7" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#E7B115" },{ offset: 1, color: "#F5814C" }])],legend: {data: ["行业1", "行业2", "行业3", "行业4", "行业5", "其他"],orient: "vertical"},title: [{text: "{name|" + "行业2" + "}\n{value|" + "25.98%" + "}",top: "center",left: "center",textStyle: {rich: {name: {fontSize: 14,fontWeight: "normal",color: "#455A74",padding: [10, 0]},value: {fontSize: 16,fontWeight: "bold ",color: "#333333"}}}}],circleData: "180",series: [{name: "客户数量占比",type: "pie",radius: ["30%", "50%"],center: ["50%", "50%"],data: [{name: "行业1",value: 19.54},{name: "行业2",value: 25.98},{name: "行业3",value: 25.98},{name: "行业4",value: 19.54},{name: "行业5",value: 19.54},{name: "其他",value: 1.26}],hoverAnimation: true,itemStyle: {normal: {borderColor: "#fff",borderWidth: 2}},labelLine: {show: true}}]},

其中,下面这段代码为主要代码

color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FC6679 " },{ offset: 1, color: "#FDC581 " }]),
]

最后效果：

Echarts实现环形图的渐变颜色效果相关推荐

【ECharts】环形图、饼状图
目录 color设置的颜色环形渐变色圆环中间显示文字悬浮显示中间文字悬浮显示中间文字,默认显示第一个循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置内容为0 ...
echarts之环形图
echarts中环形图就是饼图,区别在于是否定义了图形内部镂空的半径而已,就像下图: 那么现在有了一个圆环,中间如果空着的话就太难看了,所以给了如下的样式: 就是要给圆环中心添加内容.如果是单纯的添加 ...
echarts通用环形图
echarts通用环形图效果如下: <div class="chart-box"><div ref="pieChart" id=" ...
android自定义控件颜色渐变,Android编程实现自定义渐变颜色效果详解
本文实例讲述了Android编程实现自定义渐变颜色效果.分享给大家供大家参考,具体如下: 你是否已经厌恶了纯色的背景呢?那好,Android提供给程序员自定义渐变颜色的接口,让我们的界面炫起来吧. x ...
Echarts饼图,环形图,鼠标触碰后取消默认放大效果
项目场景: 项目场景:使用ecahrts 做一个环形图,但是鼠标触碰图例会有放大效果,根据高保真这个效果需要取消问题描述问题1我想把这个放大效果取消,让后翻阅echarts的文档让后发现 let ...
ECharts 之环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
echarts 圆角环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...
echarts3d饼图，环形图（包含透明效果）
效果图: 饼图: 环形图: 带透明度的环形图: 安装echarts "echarts":"^5.1.2" "echarts-gl":&quo ...
ECharts - 嵌套环形图
嵌套环形图链接:https://pan.baidu.com/s/1bV1IXEoSJT7vTKQcwwoVQg 提取码:hxdl

Echarts实现环形图的渐变颜色效果

已经封装好的环形图组件

引入echarts

最后效果：

Echarts实现环形图的渐变颜色效果相关推荐

最新文章

热门文章