eCharts实现颜色渐变效果环形图

之前我尝试了Element-ui的环形进度条实现颜色渐变效果

这个对eCharts来说简直就是小case。

完成之后的效果图如下：

对应的页面源代码如下：

<template><div class="panel-content"><div style="width: 300px;height: 300px;background-color: #0E1824;" ref="chartContent"></div></div>
</template><script>import '@/assets/css/home.css'import echarts from 'echarts'export default {name: "TEMPLATE",data() {return {chartData:'88.23'}},mounted() {this.showChart();},methods:{showChart(){let chart = echarts.init(this.$refs.chartContent);var data = {value: this.chartData,company: "年度能耗",ringColor: [{offset: 0,color: '#02d6fc' // 0% 处的颜色}, {offset: 1,color: '#367bec' // 100% 处的颜色}]}let option = {title: {text: data.value +'\n'+ data.company,x: 'center',y: 'center',textStyle: {color: '#fff',fontSize: '18'}},color: ['#282c40'],legend: {show: false,data: []},series: [{name: 'Line 1',type: 'pie',clockWise: true,radius: ['55', '65'],//设置圆环的半径itemStyle: {normal: {label: {show: false},labelLine: {show: false}}},hoverAnimation: false,data: [{value: data.value,name: '',itemStyle: {normal: {color: { // 完成的圆环的颜色colorStops: data.ringColor},label: {show: false},labelLine: {show: false}}}}, {name: '',value: 100 - data.value}]}]};chart.clear();chart.setOption(option);},}}
</script><style scoped></style>

注意上边实现的效果不是百分比的，如果你认为想要展示百分比效果只需要把数据设置成这样就可以了，那就错了！

chartData:'88.23%'

正确方法是把option的title设置一下：

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

tips:使用echarts构建一个半圆环形图
前言大名鼎鼎的echarts中有一些有趣的图表,其中饼图(pie)可以衍生出南丁格尔图(玫瑰图),而改变饼图的内外半径又可以使饼图变成一个圆环图,于是问题来了,怎么生成一个半圆形的圆环图呢?首先我们 ...
手把手教你用ECharts画饼图和环形图
导读:饼图也是一种常用的基本图表,主要用来展示各项的比重. 作者:王大伟来源:大数据DT(ID:hzdashuju) 下面制作一幅基础的饼图,将Echarts中series的type参数值设置为pi ...
【Vue ECharts开发】自定义echarts柱状图颜色渐变效果
1. 效果演示 2. 示例代码 Vue 模板代码: <template><div><div id="main"></div>< ...
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
Echarts实现环形图的渐变颜色效果
已经封装好的环形图组件直接在要用的vue文件中引用: <circleChart:id="chart4.id":width="chart4.width": ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
ECharts 之环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy ...
echarts 圆角环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...

eCharts实现颜色渐变效果环形图

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

最新文章

热门文章