先看效果图

代码

<!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. 云图说 | 华为云医疗智能体智联大健康：AI医学影像

    摘要:华为云医疗智能体面向医学影像领域,提供影像智能标注.算法开发和AI辅助诊断服务. 本文分享自华为云社区<[云图说]第208期 医疗智能体 智联大健康:AI医学影像>,原文作者:阅识风 ...

  2. 带你认识图数据库性能和场景测试利器LDBC SNB

    摘要:本文主要介绍基于交互式查询所用的数据生成器(下文简称Datagen),及LDBC SNB数据如何在华为图引擎服务GES中应用. 本文分享自华为云社区<[图数据库性能和场景测试利器LDBC ...

  3. Datahub新版本0.9.1更新，列级别数据血缘功能发布！

    大家好,我是独孤风. 近期Datahub进行了一次大的版本更新,从0.9版本以后Datahub也正式发布了列级别数据血缘的功能. 0.9.1版本又增加了,列的影响分析这个功能. 这样Datahub对于 ...

  4. 【Django-Vue】手机号是否存在接口 多方式登录接口 腾讯云短信介绍和申请 api与sdk

    目录 昨日回顾 今日内容 0 登录注册功能设计 1 短信登录接口 视图类 2 多方式密码登录接口 视图类 序列化类 路由 3 腾讯云短信介绍和申请 3.1api与sdk 补充 练习 昨日回顾 # 你的 ...

  5. Qt 如何配置CLion标准控制台输出？

    CMake 相关问题: 即CMakeLists.txt文件中,在add_executable添加了WIN32.即当使用了WIN32标识后,就去掉了控制台,那么自然就没有信息打印出来了. # for e ...

  6. C++岗位面试真题宝典 -- 语言基础篇

    一.C++语言基础 1.1.1 简述下C++语言的特点 参考回答: C++在C语言基础上引入了面对对象的机制,同时也兼容C语言. C++有三大特性(1)封装.(2)继承.(3)多态: C++语言编写出 ...

  7. POJ 1417 True Liars (并查集+DP）

    Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 1556 Accepted: 457 Description After havi ...

  8. Markdown 文档测试--demo

    Editor.md hhh 换行TEST 1 2 3 a b q d HEAD TEST Smart Test ... -- 目录 (Table of Contents) [TOCM] 目录 Edit ...

  9. 重磅发布丨从云原生到 Serverless，先行一步看见更大的技术想象力

    (2022 云原生实战峰会) 2022年12月28日,以"原生万物 云上创新"为主题的第三届云原生实战峰会在线上举行. 会上,阿里云提出激活企业应用构建三大范式,并发布云原生可观测 ...

  10. 【转载】内存基本概念-伙伴(Buddy)算法

    简介 ​ 在Linux系统中,内存的分配与回收速率直接影响系统的存取效率.当内核频繁请求和释放不同大小的一组连续页框时,会导致许多外部空闲碎片,造成空间的浪费.使用伙伴算法可以有效地缓解该问题.伙伴关 ...