# echarts常用配置
# echarts修改颜色
- option中配置项color
let option={
color:['purple','orange']
};
- option.series.itemStyle.normal可以配置color,这种更换颜色在高亮时需要手动配置emphasis显示高亮
option = {
series: [{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: "#4FB9EF" // 0% 处的颜色
},{
offset: 0,
color: "#307AE7" // 100% 处的颜色
}], false),
},
emphasis: {
color:'#307ae7FF'
},
},
}]
};
- 每个柱状图颜色都不一致，color可以选择使用函数的形式
color: function(params) {
function fun(a,b){
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: a // 0% 处的颜色
},{
offset: 0,
color: b // 100% 处的颜色
}], false)
}
let colorList =[]
colorList.push(fun('#59C9FA','#8DDCFF'))
colorList.push(fun('#F3900A','#F8B442'))
colorList.push(fun('#FFD018','#F8DD74'))
colorList.push(fun('#F47F9B','#E5546C'))
return colorList[params.dataIndex];
}
可以把emphasis写在itemStyle外面，包裹itemStyle(normal也可以这样实现)
option = {
series: [{
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: "#4FB9EF" // 0% 处的颜色
},{
offset: 0,
color: "#307AE7" // 100% 处的颜色
}], false),
},
},
emphasis: {
itemStyle:{
color:'#307ae7FF',
borderWidth: 2,
borderColor: '#2F4654',
borderType: 'dashed',
shadowColor: 'rgba(102,102,102,0.50)',
shadowOffsetX: 0,
shadowOffsetY: 2,
shadowBlur: 6,
}
},
}]
};
# echarts 坐标轴 辅助线 坐标单位 添加平均值 坐标数据隐藏与展示
yAxis: [
{
show:true,//y轴样式存在
axisLine:{
show:true,//y轴那条线存在否
lineStyle:{//y轴样式修改
color:'#BBCFF8',
width:1
}
},
axisTick: {show:true},//y轴刻度
splitLine:{ //切割辅助线，垂直于y轴
show:true,
lineStyle:{
type:'dashed',
color:'#BBCFF8'
}
},
type : 'value',
name:'单位（人）', //坐标单位
}
],
# 柱状图添加平均值
series: [{
// 平均值
markLine: {
data: [{ type: "average", name: "平均值" }]
}
}]
# 坐标上的文字显示全部和倾斜功能
xAxis: {
type: 'category',
data: ['学校', '加油站', '交通\n枢纽'],// \n分行
axisLine:{
show:true,
lineStyle:{
color:'#BBCFF8',
width:1
}
},
axisLabel: {
interval: 0, // 坐标轴刻度标签的显示间隔,如果有隐藏的可以设置这段代码，会全部显示
// rotate: -30 // 标签倾斜的角度
}
},
# label设置formatter
- 使用formatter函数定义
import * as echarts from 'echarts'
export default function(id){
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option;
var data = [
{ name: '男', value: 560, },
{ name: '女', value: 411, },
{ name: '未知', value: 287, }
];
let num=0
data.forEach((el,i)=>{
num += el.value
})
option = {
title: {
text: '年龄分布',
left: 'center',
top:'40%',
textStyle: {
color: '#FFF',
fontWeight: 'normal',
fontSize: 14
}
},
legend: {
bottom: '5%',
left: 'center',
icon: "circle",
itemWidth: 10,
itemHeight: 4,
itemGap: 20,
textStyle: {
color: "#FFF",
fontSize: "12"
}
},
color:['#4BB0EE','#9C6BF1','#ED6C86'],
series: [{
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '45%'],
height: '100%',
label: {
alignTo: 'edge',
color:'#FFF',
formatter: function(a){
return a.name+'\n'+ a.value/num
},
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
t1: {
fontSize: 12,
color: '#FFF'
},
t2: {
fontSize: 12,
color: '#FFF'
},
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
var isLeft = params.labelRect.x < myChart.getWidth() / 2;
var points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
};
option && myChart.setOption(option);
}
- 使用formatter表达式拼接
formatter: function(a,b,c){} 其中变量a、b、c在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）
散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）
弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)
力导向图 :
节点 : a（类目名称），b（节点名称），c（节点值）
边 : a（系列名称），b（源名称-目标名称），c（边权重）， d（如果为true的话则数据来源是边）
import * as echarts from 'echarts'
export default function(id){
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option;
var data = [
{ name: '男', value: 560, },
{ name: '女', value: 411, },
{ name: '未知', value: 287, }
];
option = {
title: {
text: '性别分布',
left: 'center',
top:'40%',
textStyle: {
color: '#FFF',
fontWeight: 'normal',
fontSize: 14
}
},
legend: {
bottom: '5%',
left: 'center',
icon: "circle",
itemWidth: 10,
itemHeight: 4,
itemGap: 20,
textStyle: {
color: "#FFF",
fontSize: "12"
}
},
color:['#4BB0EE','#9C6BF1','#ED6C86'],
series: [{
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '45%'],
height: '100%',
label: {
alignTo: 'edge',
color:'#FFF',
formatter: '{t1|{c}人}\n{t2|{d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
t1: {
fontSize: 12,
color: '#FFF'
},
t2: {
fontSize: 12,
color: '#FFF'
},
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
var isLeft = params.labelRect.x < myChart.getWidth() / 2;
var points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
};
option && myChart.setOption(option);
}
# echarts柱状图及标题
series: [{
barBorderRadius:[15, 15, 15, 15]
}]
yAxis: [{
name:'订单量',
nameTextStyle:{
color:"#52CCFF",
padding: [0, 0, 0, -20]
}}
]
# 响应式布局的页面echarts适应
var chartDom = document.getElementById(id)
var myChart = echarts.init(chartDom)
......
myChart.setOption(option)
window.addEventListener("resize", function() {
myChart.resize();
});
← echarts echarts组件化 →