Echarts饼图更改颜色、显示数据且换行
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饼图更改颜色、显示数据且换行的更多相关文章
- echarts 饼图 + 全屏显示
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Django工程中使用echarts怎么循环遍历显示数据
前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下 先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...
- echarts y轴,显示数据,但不显示竖线
在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...
- echarts饼图不显示数据为0的数据
首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- echarts折柱混合(图表数据与x轴对应显示)
一天24个小时,每个小时不一定都有对应的数据,所以后台给出的数据,只有每个时间点对应的数据,比如4点,给的是112,5点的242,其他时间没有,则只显示4点,5点时候的数据,那么现在对应的时间点就是后 ...
- echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
随机推荐
- [转]关于Infobright的数据导入
FROM : http://www.mysqlsky.com/201109/infobright-data-load-error 题记 对于DW系统而言,庞大数据的迁移成本很高:所以导入和导出的速率及 ...
- SQL Server跨服务器查询的实现方法,OpenDataSource
SQL Server跨服务器查询的方法我们经常需要用到,下面就为您介绍两种SQL Server跨服务器查询的方法,如果您感兴趣的话,不妨一看. SQL Server跨服务器查询方法一:用OPENDAT ...
- 混沌分形之谢尔宾斯基(Sierpinski)
本文以使用混沌方法生成若干种谢尔宾斯基相关的分形图形. (1)谢尔宾斯基三角形 给三角形的3个顶点,和一个当前点,然后以以下的方式进行迭代处理: a.随机选择三角形的某一个顶点,计算出它与当前点的中点 ...
- Go语言之进阶篇响应报文测试方法
1.响应报文测试方法 示例: package main import ( "fmt" "net/http" ) //服务端编写的业务逻辑处理程序 func my ...
- go语言之进阶篇文件常用操作接口介绍和使用
一.文件常用操作接口介绍 1.创建文件 法1: 推荐用法 func Create(name string) (file *File, err Error) 根据提供的文件名创建新的文件,返回一个文件对 ...
- JS Replace() 高级用法(转)
在很多项目中,我们经常需要使用JS,在页面前面对前台的某些元素做做修改,js 的replace()方法就必不可少. 经常使用"ABCABCabc".replace("A& ...
- 【Maven】Maven-maven编译报错 -source 1.5 中不支持 lambda 表达式
Maven-maven编译报错 -source 1.5 中不支持 lambda 表达式 maven lambda_百度搜索 maven编译报错 -source 1.5 中不支持 lambda 表达式 ...
- 双数组Trie树(DoubleArrayTrie)Java实现
http://www.hankcs.com/program/java/%E5%8F%8C%E6%95%B0%E7%BB%84trie%E6%A0%91doublearraytriejava%E5%AE ...
- bash shell seq的用法
seq 1 3 100 , 表示起始值为1, 间隔为3,终点值为100 #!/bin/bash aa=(1 2 3 17) #for i in 1 2 3 13 for i in ${aa[*]} d ...
- 关于 stl的内存分配的深浅拷贝
http://blog.csdn.net/u012501459/article/details/44132147