Echars水波图

npm安装依赖

npm install echarts-liquidfill

在用到需要的页面引入Echars

import echarts from 'echarts';
import echartsLiquidfill from 'echarts-liquidfill';
            myEchars() {
                let echarts = require('echarts');
                    //装水波图的盒子,注意必须的设置宽高,rem与%的单位都不可以
                    let myEchars = echarts.init(document.getElementById('echar'));                 let option = {
                    title: {
                        text: ''
                    },
                    series: [{
                        type: 'liquidFill',// 水波图
                        data: [ //可以有多个水波
                        {
                            value: 0.5,//所占比例 0-1
                            itemStyle: {
                                color: 'rgb(233,240,254)',//水波的颜色
                            }
                        }],
                        backgroundStyle :{color:'#fff'},//球状的背景颜色
                        radius: '96%',//水波图的半径
                        outline: {
                            show: false //true显示水波图上的文字
                        },
                        label: {
                            show: false, //不能对水波图设置事件
                        },
                    }],


                }
                myEchars.setOption(option);//把水波图插入盒子中
            }

我想把水波的颜色改成渐变色,但是找了好多方法都不可以,如果有谁设置渐变颜色成功了希望留言,多谢

猜你喜欢

转载自blog.csdn.net/Call_me_small_pure/article/details/80032647
今日推荐