echart 折线图、柱状图、饼图、环形图颜色修改

之前在做报表的时候用过echart 用完也就完了，而这次在用的时候已经忘了，所以这里简单记录一下，好记性不如烂笔头！！！

1、折线图修改颜色：

[javascript] view plain copy

xAxis: {
type: 'category',
boundaryGap: false,
data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']
},
yAxis: {
type: 'value'
},
series: [
{
name:'员工数',
type:'line',
stack: '总量',
itemStyle:{
normal:{
lineStyle:{
color:'#b5b5b6'
}
}
},
data:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号！
}
]

其中的series 中的lineStyle中的 color 就是折现的颜色！

2、环形图修改颜色：

[javascript] view plain copy

function queryData2(){
var i=0;
var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];
myChart2 = echarts.init(document.getElementById('main2'));
option2 = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['女','男']
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'性别结构',
type:'pie',
radius : ['30%', '70%'],
itemStyle : {
normal : {
color:function(){
return colors[i++];
},
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[]
}
]
};
}

其中函数开始定义了一个 colors 对象这里保存的都是颜色值，而在series中的itemStyle中的normal 中定义了一个color：function(){ return colors[i++]} 函数，这个函数的作用就是随机获取颜色值。这样就修改了

3、柱状图：

[javascript] view plain copy

yAxis : [
{
type : 'value'
}
],
series : [
{
name:'部门人数',
type:'bar',
data:[],
//颜色
itemStyle:{
normal:{
color:'#f5b031',
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]

颜色的修改还是在series 中的itemStyle 中的normal 中的color这个值。

4、饼图颜色修改：

[javascript] view plain copy

var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
//设置饼图的颜色
color:['#f6da22','#bbe2e8','#6cacde'],
legend: {
orient: 'vertical',
x: 'left',
data:['柴油','汽油','附属油'],
show:false
},

饼图的颜色修改和折线图环形图不同，他是单独出来的！

转载于:https://www.cnblogs.com/telwanggs/p/8521385.html

echart 折线图、柱状图、饼图、环形图颜色修改相关推荐

如何用pyecharts绘制柱状图，条形图，折线图，饼图,环形图，散点图
简介 pyecharts是一个由百度开源的数据可视化,凭借着良好的互交性,精巧的图表设计,得到了众多开发者的认可,而python是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可视化时, ...
chart.js使用学习——饼图/环形图
饼图/环形图能够展示数据集中各项的大小与各项总和的比例.chart.js中创建饼图/环形图,只需在chart构造函数中指定图表类型为pie/doughnut即可. 基本用法创建饼图/环形图主 ...
用户数据销售额分析动态大屏看板+大屏数据可视化图表组件（折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图）+智能web端高保真大数据动态可视化大屏看板+中国动态地图+智慧电商实时动态数据大屏看板
作品内容:用户数据销售额分析动态大屏看板+大屏数据可视化图表组件(折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图)+web端高保真大数据动态可视化大屏看板+中国动态地图+电商实时动态数据大屏看板 ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
echars 饼图环形图组件修改自定义图例重新渲染显示对应颜色对应区域
如图产品有个需求是要做一个环形图点击图例显示具体数字但图例加起来是超过百分百的如图一个范围内有男有女有丑逼点击男的显示男的点击女的显示女的并且显示占总数的百分比并且鼠标悬浮上去显示的 ...
java 饼图框架_Java 在 Excel 中创建饼图/环形图
import com.spire.xls.*;importcom.spire.xls.charts.ChartSerie;importcom.spire.xls.charts.ChartSeries; ...
java excel 饼图_Java 在 Excel 中创建饼图/环形图
饼图是Excel中常见的一种圆饼形图表工具,它能够直接以图形的方式展现各个组成部分在整体中所占的比例,从而帮助我们更加快速直观的去分析和理解抽象的数据.而环形图则是饼图的一种变形,在视觉上,环形图去掉 ...
java调用excel在页面生成饼状图_Java 在 Excel 中创建饼图/环形图
饼图是 Excel中常见的一种圆饼形图表工具 ,它能够直接以图形的方式展现各个组成部分在整体中所占的比例,从而帮助我们更加快速直观的去分析和理解抽象的数据.而环形图则是饼图的一种 ...
poi导出excel文件,并生成原生图表(包括折线图,柱状图,饼状图,面积图)
前段时间,因为客户需要,要做一个导出excel文件功能,并能生成原生的图表的(不是把图片插入到excel文档),找了很多文档看,也看了很多别人的代码,个人也总结了一下,不足之处,请各位大牛谅解. 需要 ...

echart 折线图、柱状图、饼图、环形图颜色修改

echart 折线图、柱状图、饼图、环形图颜色修改相关推荐

最新文章

热门文章