echarts饼状图自定义legend的样式付费
2021/9/23 23:40:58
本文主要是介绍echarts饼状图自定义legend的样式付费,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
先看效果图
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 800px;height:400px; background: pink;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var data = [{ value: 1048, name: 'Search Engine', num: 100, }, { value: 735, name: 'Direct', num: 110, }, { value: 580, name: 'Email', num: 10, }, { value: 484, name: 'Union Ads', num: 101, }, { value: 300, name: 'Video Ads', num: 101, } ] var option = { tooltip: { trigger: 'item' }, legend: { type: 'scroll', orient: 'vertical', right: '5%', top: 'center', itemWidth: 8, // 设置宽度 itemHeight: 8, // 设置高度 selectedMode: true, icon: 'circle', //关键代码 //可以让你完全自定义 }, series: [{ type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, // 去除中间的提示文字 // emphasis: { // label: { // show: true, // fontSize: '40', // fontWeight: 'bold' // } // }, labelLine: { show: false }, data: data }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
完整地址
https://www.cnblogs.com/IwishIcould/p/15327998.html
这篇关于echarts饼状图自定义legend的样式付费的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-29document对象教程:新手入门指南
- 2024-09-29端到端的 AWS DevOps 项目:使用 ECR 和 RDS 的 ECS Fargate 的 CI/CD 管道
- 2024-09-28pyqt 怎么打包整个项目-icode9专业技术文章分享
- 2024-09-28laravel Commands 创建带有参数的 Artisan 命令的步骤和示例-icode9专业技术文章分享
- 2024-09-28antd怎么实现渲染tiff图片-icode9专业技术文章分享
- 2024-09-28英文半角中划线和中文全角的中划线有什么区别-icode9专业技术文章分享
- 2024-09-28nvm npm 和node 他们之间有什么关系-icode9专业技术文章分享
- 2024-09-28Node Version Manager (nvm)使用教程-icode9专业技术文章分享
- 2024-09-28nvm命令太慢,是什么原因-icode9专业技术文章分享
- 2024-09-28Kotlin 如何增加、删除和修改 MutableStateFlow 中的值。-icode9专业技术文章分享