Echarts饼图更改颜色、显示数据且换行

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里的一项数据,也可以用十六进制表示颜色。

效果图:

时间: 2024-08-23 14:28:14

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

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

ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100%; height:400px;"></div> 二.js部分 <script type="text/javascript"> function loadOneColumn() {     var myChart = echarts.init(doc

柱形图及饼图显示数据统计

1 #include <Windows.h> 2 #include <tchar.h> 3 #include <math.h> 4 BOOLEAN InitWindowClass(HINSTANCE hInstance, int nCmdShow); 5 LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM); 6 int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPr

用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的散点图. 需求一,实现echarts中所有的散点取自table中的数据. 需求二:两个交互,交互1,点击左边的table中数据时,先实现table重新隔行变色,然后左边被点击的数据背景颜色变黄,右边的散点图点亮.通过table控制散点图. 交互2:当点击散点图中任意数据时,获取此数据来自于左边散点图

.Net程序员玩转Android开发---(12)ListView显示数据

Android中显示数据有多种控件,这节我们来认识下ListView,ListView是Android中最常用的数据显示控件,可以显示简单数据源,也可以显示复杂数据源,我们在Android系统中常看到的列表项,基本都是ListView的功劳.ListView中显示数据,肯定要绑定数据源.数据源的绑定是通过Adapter来完成的,Android中有两种常用的适配器,ArrayAdapter(数组适配器)  SimpleAdapter(简单适配器),适配器的作用就是把复杂的数据源显示到istview

DataGridView显示数据的两种方法

1.简单介绍 DataGridView空间是我们常用的显示数据的控件,它有极高的可配置性和可扩展性. 2.显示数据 DataGridView显示数据一般我们常用的有两种方法,一种是直接设置DataSoure属性就可以绑定数据.此方法不需要写任何代码操作比较简单,但是它显示出来的是整张表的数据.如果整一表数据比较多,而且我们并不需要所有的数据的情况下,我们就应该考虑第二种方法了.通过写代码连接数据库并从数据库中读取数据,最后将返回的数据传给DataGridView.这种方法貌似比较复杂,但是它只显

mysql 字符集更改与导入数据

mysql 字符集更改与导入数据 mysqldb经常有中文乱码的问题,解决起来很恼火.其实所有开发和数据库统一为一种编码就可以了: utf8. 1 下面修改mysql的编码 1) 永久修改. 在/etc/mysql/my.cnf中添加下面二行: [client] ... default-character-set=utf8 ... [mysqld] ... character-set-server=utf8 ... 重启服务,然后登录看看: $ sudo /etc/init.d/mysql re

GridView显示数据鼠标悬停变色

一. 首先在前台GridView中加上onrowdatabound="GridView1_RowDataBound": <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" onrowdatabound="GridView1_RowDataBound"> ....... </asp:GridView&

extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框

var itemsPerPage = 20; var combo; //创建数据源store Ext.define('recordStore', { extend : 'Ext.data.Store', // autoLoad : { // start : 0, // limit : itemsPerPage // }, start : 0, limit : itemsPerPage, pageSize : itemsPerPage, model : 'recordModel', proxy :

eclipse高亮选中属性以及更改颜色

1.显示:      1.1.工具栏里有个黄色小笔的图标,点一下就好了      1.2.打开对话框windows->preference,在左上角输入mark Occurrencs 把右边都选上就Ok了. 2.更改颜色:      打开对话框windows->preference,在左上角输入Annotations.选中右边的Occurences可以修改颜色.