先看效果图

代码

<!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. 云图说｜玩转华为HiLens之端云协同AI开发

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 华为HiLens ...

  2. Java编程中忽略这些细节，Bug肯定找上你

    摘要:在Java语言的日常编程中,也存在着容易被忽略的细节,这些细节可能会导致程序出现各种Bug. 本文分享自华为云社区<Java编程中容易忽略的细节总结丨[奔跑吧!JAVA]>,作者:j ...

  3. 剖析CWE视图的层次定义和解析方式

    摘要:CWE做为软件缺陷分类的重要标准, 对安全研究.安全标准.缺陷管理起了重要的纽带作用.CWE通过编号的类型(类缺陷.基础缺陷和变种缺陷等)形成了多层次的缺陷类型划分体系.本文进一步剖析了CWE视 ...

  4. 渗透测试 vs 漏洞扫描：差异与不同

    渗透测试和漏洞扫描常常被混淆,这两者都通过探索系统来寻找 IT 基础架构中的弱点及易受攻击的地方.阅读本文,带你了解两者之间的差异与不同. 手动 vs 自动 渗透测试是一种手动安全评估方式,网络安全人 ...

  5. Java 设计模式课堂作业记录

    第二章 P25,有人将面向对象设计原则简单归类为 3 条:①封装变化点: ②对接口进行编程: ③多使用组合,而不是继承.请查阅相关资料谈谈理解 3.7 : 该三大原则 应该算 是OO的基础,很多OO设 ...

  6. 解决MySQL在连接时警告：WARN: Establishing SSL connection without server's identity verificatio

    起因: 程序在启动时,连接MySQL数据库,发出警告️: Establishing SSL connection without server's identity verification is n ...

  7. 【每日一题】29.maze （BFS 进阶）

    补题链接:Here 本题代码由贺佬完成 这道题基本算一道 BFS 进阶题,有少许细节要小心 (WA1发.. #include <bits/stdc++.h> #define x first ...

  8. webpack4.0+简要

    一.webpack简介 webpack 是当下十分流行的一款静态模块打包工具,将JS.CSS.HTML.图片等各种静态资源视为一个个模块,通过一个或者多个入口文件通过解析依赖关系生成一个依赖图,最终打 ...

  9. C#使用ParseExact方法将字符串转化为日期格式

    private void btn_Convert_Click(object sender, EventArgs e) { #region 针对Windows 7系统 string s = string ...

  10. java项目实践-请求转发以及重定向-day18

    目录 1. 中文乱码问题 2. 请求的转发servlet 3. 登录后的重定向 4 总结 1. 中文乱码问题 创建一个工程secondweb 添加jar包依赖 new servlet web.xml添 ...