Echarts实战案例代码(33):饼状图半圆实现方法

简介: Echarts实战案例代码(33):饼状图半圆实现方法


解决方案:按照饼图的实际写法,将所有项作为180°上的饼图,所有相的和作为180°下的半圆不显示即可。

let list = [{
    name: "张三",
    value: "9"
}, {
    name: "李四",
    value: "50"
}, {
    name: "王五",
    value: "30"
}, {
    name: "马六",
    value: "9"
}, {
    name: "__other",
    value: "0"
}]
let sum = 0;
list.map((item, index) => {
    sum += parseInt(item.value)
})
list[list.length - 1].value = sum
let colorList = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', "rgba(0,0,0,0)"]


Echarts option:

option = {
    tooltip: {},
    color: colorList,
    series: [{
        name: "",
        type: "pie",
        hoverAnimation: false,
        startAngle: -180,
        radius: ["60%", "100%"],
        center: ["50%", "70%"],
        label: {
            normal: {
                show: true,
                position: "inner", //显示在扇形上
                formatter: "{b}", //显示内容
                textStyle: {
                    color: "white", // 改变标示文字的颜色
                    fontSize: 12, //文字大小
                    fontWeight: "bold",
                },
            },
        },
        labelLine: {
            normal: {
                show: false,
            },
        },
        data: list,
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
            },
        },
    }, ],
}

存在的问题:

下面180°的图形,只是将图形通过rgba(0,0,0,0)隐藏了,在实际场景中需要调整 center: ["50%", "70%"]来控制具体的显示方式。


Done!

相关文章
|
6天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
72 2
|
6天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
29 0
|
6天前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
6天前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
6天前
|
JavaScript 前端开发 容器
js---Echarts水球图的简单使用方法(ecarts官方插件)
js---Echarts水球图的简单使用方法(ecarts官方插件)
55 0
|
6月前
去掉Echarts饼状图的引导线
去掉Echarts饼状图的引导线
100 0
|
6月前
|
JSON 数据格式
Echarts的饼状图变成环形图
Echarts的饼状图变成环形图
24 0
|
6月前
关于Echarts柱状图监听点击事件的实现方法
关于Echarts柱状图监听点击事件的实现方法
127 0
|
6月前
Echarts饼状图大小及其位置调整
Echarts饼状图大小及其位置调整
135 1
|
6月前
|
JSON 前端开发 数据格式
Echarts饼状图数据交互请求ajax自定义颜色
Echarts饼状图数据交互请求ajax自定义颜色
24 0