首页 > 其他分享 >echarts异形图水滴图,百分比显示,波浪水球

echarts异形图水滴图,百分比显示,波浪水球

时间:2022-08-23 15:15:24浏览次数:100  
标签:false 异形 color type 水球 fontSize var data echarts

var value = 0.45;
var value1 = 0.76;
var data = [value, value1];
var option = {
     backgroundColor: '#0F224C',
    title: [
        {
            text: '本年收缴率',
            x: '22%',
            y: '70%',
            textStyle: {
                fontSize: 14,
                fontWeight: '100',
                color: '#5dc3ea',
                lineHeight: 16,
                textAlign: 'center',
            },
        },
        {
            text: '本月收缴率',
            x: '73%',
            y: '70%',
            textStyle: {
                fontSize: 14,
                fontWeight: '100',
                color: '#5dc3ea',
                lineHeight: 16,
                textAlign: 'center',
            },
        },
    ],
    series: [
        {
            type: 'liquidFill',
            radius: '47%',
            center: ['25%', '45%'],
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#446bf5',
                        },
                        {
                            offset: 1,
                            color: '#2ca3e2',
                        },
                    ],
                    globalCoord: false,
                },
            ],
            data: [value, value], // data个数代表波浪数
            backgroundStyle: {
                borderWidth: 1,
                color: 'RGBA(51, 66, 127, 0.7)',
            },
            label: {
                normal: {
                    textStyle: {
                        fontSize: 50,
                        color: '#fff',
                    },
                },
            },
                        outline: {
                            // show: false
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#112165',
                            },
                        },
        },


        { //第二个球的填充
            type: 'liquidFill',
            radius: '47%',
            center: ['75%', '45%'],
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#2aa1e3',
                        },
                        {
                            offset: 1,
                            color: '#08bbc9',
                        },
                    ],
                    globalCoord: false,
                },
            ],
            data: [value1, value1], // data个数代表波浪数
            backgroundStyle: {
                borderWidth: 1,
                color: 'RGBA(51, 66, 127, 0.7)',
            },
            label: {
                normal: {
                    textStyle: {
                        fontSize: 28,
                        color: '#fff',
                    },
                },
            },
                        outline: {
                            // show: false
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#112165',
                            },
                        },
        },
    ],
};

 

 

标签:false,异形,color,type,水球,fontSize,var,data,echarts
From: https://www.cnblogs.com/facenano/p/16616205.html

相关文章

  • echarts饼图,完整圆形,百分比显示
    option={tooltip:{trigger:'item',formatter:"{a}<br/>{b}:{c}({d}%)"},color:['#8fc31f','#f35833','......
  • echarts环形饼图,完整圆形,百分比分值
    varscale=1;varechartData=[{value:21,name:'市场签约1'},{value:38,name:'市场签约2'},{value:35,name:'市场签约3'},......
  • echarts 数据的各种格式
    数据集数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在series.data中设置数据,但是从ECharts4支持数据集开始,更推荐使用数据集来管理数据。因为这样......
  • ECharts 中的样式简介
    ECharts中的样式简介本文主要是大略概述,用哪些方法,可以在ApacheEChartsTM中设置样式,改变图形元素或者文字的颜色、明暗、大小等。为了让表述更通俗易懂,我们在这里用......
  • echarts 图表容器及大小
    图表容器及大小在快速上手中,我们介绍了初始化ECharts的接口echarts.init。API文档中详细介绍了参数的具体含义,建议理解后再阅读本文。下面,我们就常见的几种使用场景,......
  • 学习:python pyecharts数据可视化
    pyecharts数据可视化pyecharts是一个用于生成Echarts图标的类库Echarts是百度开源的一个数据可视化的Js库用Echarts生成的图可视化效果非常棒 新版v1和老版本......
  • 在vue中使用echarts
    1.引入echarts先通过npm安装echartsnpmrunecharts--save2.在main.js中import*asechartsfrom'echarts';Vue.prototype.$echarts=echarts3.在.vue文件中(包括......
  • echarts存在两个series时,tooltip限制仅显示一个
    应用场景       如图,当需要用类似装饰时,需要有两个轴,两组数据,但是tooltip中应该仅显示一组。 解决方法     在option下先设置一个全局的tool......
  • ECharts
    配置调整横纵坐标与边缘的距离方法一:grid:{top:"60px",bottom:"60px",left:"35px",right:"20px",},方法二:博客......
  • echarts 备忘
    1.画线参考:https://echarts.apache.org/examples/zh/editor.html?c=scatter-anscombe-quartet&lang=js示例代码constmarkLineOptFactory=(start=[0.3,0],end......