先看效果图

代码

<!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. max file descriptors [4096] for elasticsearch process is too low, increase to at least [65535]

    elasticsearch安装后启动时候,遇到此问题 问题翻译过来就是:elasticsearch用户拥有的可创建文件描述的权限太低,至少需要65536: 解决办法: 切换到root用户修改 vim  ...

  2. App Store上架流程/苹果app发布流程

    第一步:拥有自己的苹果开发者账号: 开发账号分为两类:99美元(发布App Store用的,也就是上架苹果商店用这个):299美元(企业授信证书,不用上架appstore 亦可使用.弊端:证书容易被封 ...

  3. Django增删改查

    增删改查.配置对应路由,函数,视图.报错注意看控制台. 添加取到前台传来的参数,后端给予验证.入库 编辑,取到当前编辑得id,在后台查到对应数据.重新update 删除,取到当前点击ID,后台dele ...

  4. AtCoder Beginner Contest 163 （6/6)

    比赛链接:Here AB水题, C - management 题意:给一棵 \(N(2\le N\le2e5)\)​ 个节点的有根树,求每个节点的儿子数. 思路:由于输入直接给的是每个节点的父节点,直 ...

  5. AcWing第四场周赛

    比赛链接:Here AcWing 3694. A还是B 签到题 void solve() { int n; string s; cin >> n >> s; int t = c ...

  6. AtCoder Beginner Contest 188 题解

    AtCoder Beginner Contest 188 A,B很简单就不多说 C - ABC Tournament 找出前一半的最大值和后一半的最大值,二者中较小的那一个对应的序号就是最后的答案. ...

  7. 从各方面比较下kafka、activemq、rabbitmq、rocketmq之间的区别

    [消息队列]从各方面比较下kafka.activemq.rabbitmq.rocketmq之间的区别   一.单机吞吐量ActiveMQ:万级,吞吐量比RocketMQ和Kafka要低了一个数量级Ra ...

  8. STM32CubeMX教程18 DAC - DMA输出自定义波形

    1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) 野火DAP仿真器 keil µVision5 IDE(MDK-Arm ...

  9. 引发C++异常的常见原因（一）从报错地址到错误症状

    在进行C++软件开发的过程中,会遇到很多问题,网上差不到,或者查到了也没什么信息可以用,所以这里想到了就将一些常见的问题放在一起,归纳整理一下. 本文主要的内容来源于CSDN的大佬文章:https:/ ...

  10. 解决navicat连接mysql数据库查询很慢的问题

    1.背景: navicat连接数据库进行sql查询,每隔一段时间发现查询会变得很慢 2.原因: Mysql服务器端会定时清理长时间不活跃空闲的数据库连接,进行优化 3.解决方案: Navicat -右 ...