先看效果图

代码

<!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. 关于HTTPS认证，这里解决你所有疑惑

    摘要:从签发证书到数据加密交互,按流程的进展讲解HTTPS认证过程内容和原理. 本文分享自华为云社区<故事+图文,一次性解决你对HTTPS认证过程的所有疑惑>,作者:breakDraw. ...

  2. Solon 1.6.34 发布，更现代感的应用开发框架

    相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...

  3. C++11实用特性3 --智能指针

    1 智能指针 在C++中没有垃圾回收机制,必须自己释放分配的内存,否则就会造成内存泄露.解决这个问题最有效的方法是使用智能指针(smart pointer).智能指针是存储指向动态分配(堆)对象指针的 ...

  4. QA32增强

    一.QA32报表新增字段 二.QA32报表程序RQEEAL10 结构增加字段,该结构就是报表展示字段列的结构 表新增字段 找到报表展示的子例程 找到程序RQEEAL10,子例程中新增隐式增强 隐式增强 ...

  5. 【辅助工具】Apifox

    注意事项 需要刷新权限 请求方式需要对应

  6. 网传的Spring大漏洞

    昨天凌晨发了篇关于Spring大漏洞的推文,白天就有不少小伙伴问文章怎么删了. 主要是因为收到朋友提醒说可能发这个会违规(原因可参考:阿里云因发现Log4j2核弹级漏洞但未及时上报,被工信部处罚),所 ...

  7. HomeBrew 安装 Maven 及其 IDEA 配置

    Brew 安装 Maven brew search maven # 使用搜索工具去搜索maven包 brew info maven #使用info查看maven包当前的信息情况,包括版本依赖描述等 b ...

  8. POJ3414 Pots（ BFS搜索）

    题目: 给你两个容器,分别能装下A升水和B升水,并且可以进行以下操作 FILL(i) 将第i个容器从水龙头里装满(1 ≤ i ≤ 2); DROP(i) 将第i个容器抽干 POUR(i,j) 将第i个 ...

  9. VCODE修改控制台编码格式解决输出乱码问题

      中文的windows下的cmd默认使用GBK的编码,敲代码时,页面使用的是UTF-8(65001),而powershell控制台默认使用的是GBK编码(936),用chcp命令可以查看.乱码主要是 ...

  10. Vue tinymce富文本编辑器整合

    最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 vue cli 3 + tinymce5.0版本整合参考:https://liubing. ...