Echarts实战案例代码(3):饼图pie之南丁格尔玫瑰图rose实现代码

简介: Echarts实战案例代码(3):饼图pie之南丁格尔玫瑰图rose实现代码


var myChart = echarts.init(document.getElementById('echarts_2'));
        var option = {
            color: ["#a71a4f", "#bc1540", "#c71b1b", "#d93824", "#ce4018", "#d15122", "#e7741b", "#e58b3d", "#e59524", "#dc9e31", "#da9c2d", "#d2b130", "#bbd337", "#8cc13f", "#67b52d", "#53b440", "#48af54", "#479c7f", "#48a698", "#57868c"],
            tooltip: {
                trigger: 'item',
                formatter: "{b}  <br/>{c}万元"
            },
            legend: {
                left: '3%',
                orient: 'vertical',
                type: "scroll",
                data: ["建设路街道", "长兴路街道", "长社路街道", "金桥路街道", "和尚桥镇", "坡胡镇", "后河镇", "石固镇", "老城镇", "南席镇", "大周镇", "董村镇", "古桥镇", "石象镇", "佛耳湖镇", "增福镇"],
                icon: 'circle',
                textStyle: {
                    color: '#fff',
                }
            },
            calculable: true,
            series: [{
                name: '街道',
                type: 'pie',
                //startAngle: 0,
                //clockwise: false,
                radius: ["10%", "80%"],
                center: ['55%', '50%'],
                roseType: 'area',
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}万元',
                    textStyle: {
                        fontWeight: 'bold',
                        fontFamily: 'Microsoft YaHei',
                        color: '#FAFAFA',
                        fontSize: 8
                    },
                },
                labelLine: {
                    show: true,
                    length: 0,
                    length2: 2,
                },
                data: [
                    {value: 600, name: '建设路街道'},
                    {value: 1100, name: '长兴路街道'},
                    {value: 1200, name: '长社路街道'},
                    {value: 1300, name: '金桥路街道'},
                    {value: 1250, name: '和尚桥镇'},
                    {value: 400, name: "坡胡镇"},
                    {value: 680, name: "后河镇"},
                    {value: 150, name: "老城镇"},
                    {value: 470, name: "石固镇"},
                    {value: 780, name: "南席镇"},
                    {value: 680, name: "大周镇"},
                    {value: 880, name: "董村镇"},
                    {value: 1201, name: "古桥镇"},
                    {value: 540, name: "石象镇"},
                    {value: 960, name: "佛耳湖镇"},
                    {value: 1280, name: "增福镇"}
                ].sort(function (a, b) { return b.value - a.value;}),
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
相关文章
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
918 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
293 1
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
487 3
ECharts综合案例一:近七天跑步数据
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
592 3
ECharts综合案例一:近七天跑步数据
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
332 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
520 0
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
1676 0
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
2431 1
微信小程序使用echarts图表(ec-canvas)
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码