ECharts南丁格尔玫瑰实现及部分配置解析

最新推荐文章于 2025-01-26 16:57:54 发布

小白学习日记

最新推荐文章于 2025-01-26 16:57:54 发布

阅读量4.2k

点赞数 4

分类专栏： ECharts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_46533814/article/details/122809107

版权

ECharts 专栏收录该内容

3 篇文章

订阅专栏

echarts饼状图实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>南丁格尔玫瑰</title>
    <script src="echarts.js"></script>
    <style>
        div {
            height: 600px;
            width: 800px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="main">
</div>
<script>
    let myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            text: '南丁格尔玫瑰 Chart',
            //副标题文本
            subtext: 'what',
            //title 组件离容器左侧的距离。
            left: 'center'
        },
        tooltip: {
			//触发方式
//1.item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
//2.axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
//3.none：什么都不触发
            trigger: 'item',
            /*
            模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
1.折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
2.散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
3.地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
4.饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
......
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)',
            //如果提示框太大，加上此句，可以设置宽高
            extraCssText:'width:100px;height:60px;'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            //如果series中name有值，则可以省略此句,所以在这里改的值也会被series中的值覆盖
            data: [
                '刺客',
                'rose2',
                'rose3',
                'rose4',
                'rose5',
                'rose6',
                'rose7',
                'rose8'
            ]
        },
        toolbox: {
            //是否显示工具栏
            show: true,
            feature: {
                mark: { show: true },
           //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                dataView: { show: true, readOnly: false },
                //配置项还原
                restore: { show: true },
                //一般开启这个，另存为图片
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '王者 Mode',
                type: 'pie',//饼图
                darkMode: false,//是否深色，具体看背景颜色
                radius: [20, 100],//饼图半径
                center: ['25%', '50%'],//图表位置定位
                //是否展示为南丁格尔图
               //radius:扇区圆心角展现数据的百分比，半径展现数据的大小。
               //area:所有扇区圆心角相同，仅通过半径展现数据大小。
                roseType: 'radius',
                //图形样式
                itemStyle: {
                    borderRadius: 5//倒圆角
                },
                label: {
               //是否显示饼图图形上的文本标签，false点击显示true默认显示
                    show: false
                },
                //高亮状态的扇区和标签样式
                emphasis: {
                    label: {
                        show: true
                    }
                },
                //数据部分：json格式
                data: [
                    { value: 40, name: 'rose 1' },
                    { value: 33, name: 'rose 2' },
                    { value: 28, name: 'rose 3' },
                    { value: 22, name: 'rose 4' },
                    { value: 20, name: 'rose 5' },
                    { value: 15, name: 'rose 6' },
                    { value: 12, name: 'rose 7' },
                    { value: 10, name: 'rose 8' }
                ]
            },
            //第二个饼状图
            {
                name: '地区 Mode',
                type: 'pie',
                radius: [20, 140],
                center: ['75%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 30, name: 'rose 1' },
                    { value: 28, name: 'rose 2' },
                    { value: 26, name: 'rose 3' },
                    { value: 24, name: 'rose 4' },
                    { value: 22, name: 'rose 5' },
                    { value: 20, name: 'rose 6' },
                    { value: 18, name: 'rose 7' },
                    { value: 16, name: 'rose 8' }
                ]
            }
        ]
    };
    //设置指定的配置项和数据显示图表。
    myChart.setOption(option)
</script>
</body>
</html>

测试结果：
在这里插入图片描述