原文地址： http://www.hxstrive.com/article/618.htm

关于EChart的用法这里不再赘述，直接上代码和效果图。代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ECharts3</title>

    <link rel="icon" href="favicon.ico" type="image/x-icon" id="../../page_favionc">

    <script src="../../public/js/echarts3/echarts.js"></script>

</head>

<body>

<div id="main" style="width: 800px;height:550px;"></div>

<script type="text/javascript">

    // 自定义颜色

    var colors = ["red", "green", "blue", "orange", "greenyellow"];

    // 颜色下标，每次渲染饼图一个扇区加一操作

    var i = 0;

    

    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({

        title : {

            text: '某站点用户访问来源',

            subtext: '纯属虚构',

            x:'center'

        },

        tooltip : {

            trigger: 'item',

            formatter: "{a} <br/>{b} : {c} ({d}%)"

        },

        legend: {

            orient: 'vertical',

            left: 'left',

            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

        },

        series : [

            {

                name: '访问来源',

                type: 'pie',

                radius : '55%',

                center: ['50%', '60%'],

                data:[

                    {value:335, name:'直接访问'},

                    {value:310, name:'邮件营销'},

                    {value:234, name:'联盟广告'},

                    {value:135, name:'视频广告'},

                    {value:1548, name:'搜索引擎'}

                ],

                itemStyle: {

                    normal: {

                        // 设置饼图的颜色

                        color: function(){

                            return colors[i++];

                        }

                    },

                    emphasis: {

                        shadowBlur: 10,

                        shadowOffsetX: 0,

                        shadowColor: 'rgba(0, 0, 0, 0.5)'

                    }

                }

            }

        ]

    });

</script>

</body>

</html>

EChart自定义饼图颜色相关推荐

  1. python饼图添加颜色_PythonPlotly：通过字典自定义饼图颜色

    颜色字典 假设你有你的color_dict.Plotly采用与标签和值向量长度相同的颜色数组.因此,您必须自己构造这个数组,例如:import numpy as np crit = np.array( ...

  2. echarts自定义图表颜色，柱状图/饼图自定义渐变色

    echarts自定义图表颜色,自定义渐变色 柱状图: 单色: 原先图表的颜色 配置代码: series: {type: "bar",barWidth: "60" ...

  3. iOS-贝塞尔曲线之自定义饼图

    代码地址如下: http://www.demodashi.com/demo/11981.html 项目中需要统计数据展现, 采用了饼图形式展现. 第一步: 了解下贝塞尔曲线相关概念 贝塞尔曲线相关概念 ...

  4. R语言使用R原生函数plot和lines可视化线图、并使用lty参数自定义线条类型、lwd自定义设置线条的粗细、col参数自定义线条颜色(Change R base plot line types)

    R语言使用R原生函数plot和lines可视化线图.并使用lty参数自定义线条类型.lwd自定义设置线条的粗细.col参数自定义线条颜色(Change R base plot line types) ...

  5. R语言ggpubr包ggsummarystats函数可视化分组条形图(自定义分组颜色、添加抖动数据点jitter、误差条)并在X轴标签下方添加分组对应的统计值（样本数N、中位数、四分位数的间距iqr)

    R语言ggpubr包ggsummarystats函数可视化分组条形图(自定义分组颜色.添加抖动数据点jitter.误差条error bar)并在X轴标签下方添加分组对应的统计值(样本数N.中位数med ...

  6. R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(自定义分组颜色、主题)实战（dot plot）

    R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(自定义分组颜色.主题)实战(dot plot) 目录 R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(自 ...

  7. Pycharm如何设置自定义背景颜色

    Pycharm可以通过设置主题来设定背景颜色,但主题的背景颜色也仅仅局限特定的几种,通过如下的方式可以自定义背景颜色. File--Settings--Editor--General--(右侧上方的框 ...

  8. QT自定义饼图的外观

    QT自定义饼图的外观 项目简介 项目技术 项目展示 主要源码片段解析 获取完整项目源码传送门 项目简介 自定义饼图的外观. 项目技术 qt5.12,qt charts模块,C++ 项目展示

  9. QT绘制饼图和自定义饼图切片

    QT绘制饼图和自定义饼图切片 项目简介 项目技术 项目展示 主要源码片段解析 获取完整项目源码传送门 项目简介 创建一个简单的饼图以及如何对饼图切片进行一些自定义. 项目技术 qt5.12,qt ch ...

  10. python定义字体颜色_windows print 自定义字体颜色【python】

    windows print 自定义字体颜色 import ctypes STD_INPUT_HANDLE = -10 STD_OUTPUT_HANDLE= -11 STD_ERROR_HANDLE = ...

最新文章

  1. 下载python的步骤ios_下载及安装Python详细步骤
  2. C语言易错题集 第一部
  3. 算法题目中常见的几种输入小点-gets，cin，scanf，getline，sstream
  4. c语言中如何打出草花图案,C语言程序设计程设计题目1.doc
  5. 人脸识别中Softmax-based Loss的演化史
  6. HIGHGUI ERROR: V4L/V4L2: VIDIOC_S_CROP错误解决方法
  7. 【转】21世纪律师办公自动化的一个调查
  8. mysql5.6安装配置教程_Centos6.8 Mysql5.6 安装配置教程
  9. react 全选反选_js中怎么将createElement出来的复选框实现全选，全不选，反选效果？...
  10. 剑指offer——面试题38：数字在排序数组中出现的次数
  11. 动态规划算法 dynamic programming
  12. Java编译器：Javac
  13. 深度学习技术在遥感中应用的综述
  14. pdf文件怎么合并在一起
  15. 微信公众号盈利模式_微信公众号的盈利方式有哪些?
  16. LOONGSON派二代 ReWorks系统固化
  17. Python_解一元二次方程
  18. 删除node_modules文件夹太慢
  19. 【ZJOJ1321】灯
  20. java练习题--商品管理系统

热门文章

  1. 写给初中级前端的高级进阶指南
  2. 在软件开发的早期阶段为什么要进行可行性研究?应该从哪些方面研究目标系统的可行性?
  3. java创作一个椭圆类_椭圆类——3 （类的复杂设计）
  4. Openstack API 开发 快速入门
  5. 输入平方尺转换为平方米 计算机,如何用电脑打出平方?平方米符号输入步骤教程...
  6. iOS解决键盘收起时页面上移的问题
  7. IIS服务器搭建与WWW资源加载
  8. 深度学习方法（十五）：知识蒸馏（Distilling the Knowledge in a Neural Network），在线蒸馏
  9. AR涂涂乐⭐七、（end）取消“识别成功”提示面片、加入太阳系及其交互功能、退出按钮设置
  10. 1 年原创 150+ 篇，这位前阿里 P9 牛批！