var option = {
   title : {
       text: '数据来源',
       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:sum_article, name:'文章'},
               {value:sum_bbs, name:'论坛'},
               {value:sum_vul, name:'漏洞'},
               {value:sum_weibo, name:'微博'},
               {value:sum_zhihu, name:'知乎'}
           ],
           itemStyle: {
           normal:{
             label:{
             show:true,
             formatter: '{b} : {c} \n ({d}%)'
             },
             labelLine:{
             show:true
             }

             },
               emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           }
       }
   ],
   color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)']

};

红色部分的代码是用来在echarts鼠标不hover在扇形上的时候显示数据的,其中/n用来换行。

绿色部分是改变扇形的颜色,每一个rgb对应data里的一项数据,也可以用十六进制表示颜色。

效果图:

 

Echarts饼图更改颜色、显示数据且换行的更多相关文章

  1. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. Django工程中使用echarts怎么循环遍历显示数据

    前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下 先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...

  3. echarts y轴,显示数据,但不显示竖线

    在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...

  4. echarts饼图不显示数据为0的数据

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...

  5. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  6. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  7. echarts折柱混合(图表数据与x轴对应显示)

    一天24个小时,每个小时不一定都有对应的数据,所以后台给出的数据,只有每个时间点对应的数据,比如4点,给的是112,5点的242,其他时间没有,则只显示4点,5点时候的数据,那么现在对应的时间点就是后 ...

  8. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  9. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

随机推荐

  1. Visual Studio 2013 智能提示功能消失解决办法

    Visual Studio 2013中,智能提示功能突然用不了,查了一下,使用命令行重置VS的方法解决了这个问题.步骤如下: 开始菜单 -->所有程序-->Visual Studio 20 ...

  2. c#中的 数组

    数组即是一组相同类型组合在一起,使用一个通用的名称,通过分配的下标访问的数据集合中的元素. 数组是具有相同类型的一组数据.当访问数组中的数据时,可以通过下标来指明.c#中数组元素可以为任何数据类型,数 ...

  3. Ios之网络编程NSURLConnection

    通过NSURLConnection主要通过四个类进行网络访问:NSURL,NSURLRequest,NSMutableURLRequest,NSURLConnection 一.基本知识 (1)NSUR ...

  4. 开源ckplayer 网页播放器去logo去广告去水印修改

    功能设置介绍 本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容: 1:修改或去掉播放器前置logo 2:修改或去掉右上角的logo 3:修改.关闭.设置滚动文字广告 4:去掉右边的开关灯分享 ...

  5. 一次Spark应用程序参数优化案例

    并行度 对于*ByKey等需要shuffle而生成的RDD,其Partition数量依如下顺序确定:1. 方法的第二个参数 > 2. spark.default.parallelism参数 &g ...

  6. 强制开启android webview debug模式使用Chrome inspect

    强制开启android webview debug模式使用Chrome inspect https://blog.csdn.net/zhulin2609/article/details/5143782 ...

  7. VS2013开发asmx接口返回一个自定义XML

    1:利用XmlDocument生成一个xml文档返回,代码如下 using System;using System.Collections.Generic;using System.Linq;usin ...

  8. Windows系统内存分析工具的介绍

      Windows系统内存分析工具的介绍(进程管理器,资源管理器,性能监视器, VMMap, RamMap,PoolMon) 微软官方提供多种工具来分析Windows 的内存使用情况,除了系统自带的任 ...

  9. DOM对象操作html元素1

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. border-color: transparent rgb(255, 48, 48) transparent transparent;

    border-color: transparent rgb(255, 48, 48) transparent transparent;