先看效果图

代码

<!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的样式付费的更多相关文章

  1. jquery echarts 饼状图

    var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...

  2. Echarts 饼状图自定义颜色

    今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...

  3. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

  4. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  5. echart 饼状图自定义样式

    echarts.init(document.getElementById('WaterCategoryStatistics')).setOption({ legend: { orient:'verti ...

  6. ECharts饼状图添加事件

    和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  7. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...

  8. echarts 饼状图 改变折线长度

    $(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...

  9. Echarts饼状图

    <head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...

  10. echarts 饼状图

    说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4  c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...

随机推荐

  1. Scrum Master需要具备哪些能力和经验

    摘要:ScrumMaster对于产品负责人和开发团队来说,履行的是教练的职责,帮助团队和组织其他成员发展具有组织特色的.高效的Scrum方法,贯彻执行敏捷思想,激励团队持续提升,并不懈追求卓越的表现. ...

  2. 实践解析可视化开发平台FlinkSever优势

    摘要:华为Flink可视化开发平台FlinkServer作为自研服务,能够提供比原生flinksql接口更强的企业级特性,比如任务的集中管理,可视化开发,多数据源配置等. 本文分享自华为云社区< ...

  3. 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0（上）

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...

  4. FTP安全组设置

    放行FTP服务器 TCP 21端口及FTP服务器被动1024/65535端口

  5. MQTT 客户端 MQTT.fx 使用说明

    下载 官网:https://softblade.de/en/download-2/ 说明:最后的免费版本是 MQTT.fx 1.7.1,官网已经没有免费的版本 下载 MQTT.fx 1.7.1 htt ...

  6. HF Hub 现已加入存储区域功能

    我们在 企业版 Hub 服务 方案中推出了 存储区域(Storage Regions) 功能. 通过此功能,用户能够自主决定其组织的模型和数据集的存储地点,这带来两大显著优势,接下来的内容会进行简要介 ...

  7. 动作捕捉系统验证OPT追踪井下无人机的性能

    井下无人机长时间在恶劣环境下执行勘测.救援任务,通讯系统可能会陷入两难的境地--传输高精度坐标伴随着大量耗能.为解决这项难题,中国矿业大学计算机科学和技术学院陈朋朋教授团队提出了一种基于超宽带(UWB ...

  8. Spring事务传播机制解析

    确保数据一致性的关键 在Java的Spring框架中,事务管理是保证应用数据一致性和可靠性的关键.Spring提供了灵活的事务传播机制,它定义了事务边界,以及在嵌套方法调用时如何处理事务.本文旨在深入 ...

  9. 4.0 《数据库系统概论》数据库安全性详解---（存取控制、DAC&MAC、视图机制、审计Audit....）

    前言 本篇文章学习书籍:<数据库系统概论>第5版 王珊 萨师煊编著 视频资源来自:数据库系统概论完整版(基础篇+高级篇+新技术篇) 由于 BitHachi 学长已经系统的整理过本书了,我在 ...

  10. vue 调试工具vue-devtools 安装

    一.下载 工具vue-devtools 注:必须是5.1.1版本 比这个版本高的试过,没法正确使用. https://github.com/vuejs/vue-devtools/tree/v5.1.1 ...