关于Echarts的一些设置总结
最近领导让我一个偏后端程序员画各种数据展示echarts页面，遇到好多问题在此记录一下，未完待续。。。
ps：不喜欢画页面啊啊啊啊啊，以前公司这些都是ui的活啊啊啊啊，折磨死我啦啊啊啊啊
一、柱形图
1、echarts如何设置柱形颜色渐变
在option加color属性
option = {
color: {
type: 'linear',
// x=0,y=1,柱子的颜色在垂直方向渐变
x: 0,
y: 1,
colorStops: [
// 0%处的颜色
{
offset: 0,
color: '#53AC2C',
},
// 100%处的颜色
{
offset: 1,
color: '#96DF74',
},
],
global: false // 缺省为 false
},
}
2、echarts柱状图宽度如何设置
在series数组的元素中添加barWidth属性
series: [
{
data: [18, 12, 9, 12, 14, 16, 12,8,11,13,9,6],
type: 'bar',
barWidth: 17,
label: {
show: true,
color: "#fff",
position: 'top',
},
},
],
3、echarts图例位置如何设置
在option中添加legend属性
option = {
legend: {
right: 5,//图例位置调整
top: 20,//图例位置调整
bottom: 30,//图例位置调整
width:10,//图例宽度，控制图例是横向排列还是纵向排列
itemGap: 20, //图例间距
itemHeight: 6, //图例小方框的高度
itemWidth: 15, //图例小方框的宽度
icon: 'circle', //图例前面的图标形状icon可选样式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
textStyle: {
color: "#fff",//如果需要图例文字颜色与图例颜色保持一致，该属性可设置成“auto”
},
},
}
4、echarts图表位置调整
在option中添加grid属性
option={
grid: {
left: "5%",
right: "15%",
bottom: "2%",
containLabel: true,
},
}
5、如何在echarts柱状图中插入直线
在series数组中添加元素
series: [
{
type: 'bar',
markLine: {
silent: true, // 鼠标移动到标记线上无操作
symbol: "none",
itemStyle: {
normal: {
label : {
show:false
},
lineStyle: {
color: '#04FF58',
}
}
},
data: [
{
yAxis: '60' // 分割线的位置
}
]
}
},
]
6、el-dialog里面的echarts不显示问题
初始化方法写在this.$nextTick里面
this.$nextTick(() => {
let kglChart1 = this.$echarts.init(document.getElementById('echarts'))
kglChart1.setOption(option,true);
})
7、echarts修改option并重新调用setOption方法后，图表样式没有改变
在setOption方法调用的时候，传递第二个参数为true
kglChart1.setOption(option,true);
8、echarts多条柱状图如何单独设置渐变色
在series数组元素中添加itemStyle属性
series: [
{
name:'类型',
data: [10, 2, 16, 8, 10, 12, 16,13,9,7,11,12],
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
show: true,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2788FB'
}, {
offset: 1,
color: '#0854B1'
}]),
}
},
label: {
show: true,
color: "#fff",
position: 'top',
},
},
......
],
9、echarts多条柱状图间距如何缩短
在series数组元素中添加barGap属性
series: [
{
name:'类型',
data: [10, 2, 16, 8, 10, 12, 16,13,9,7,11,12],
type: 'bar',
barGap: '0%',
barWidth: 15,
},
......
],
10、y坐标轴取值范围和间隔大小如何设置
yAxis:{
show: true,
name:'(%)',
type: 'value',
min: 0,//y轴最小值
max: 100,//y轴最大值
splitNumber:11,//y轴分成几个点
}
二、折线图
1、如何给折线图节点数据添加单位
在series数组元素中label属性里添加formatter属性
series: [
{
type: 'line',
yAxisIndex: 0,
//鼠标移动到节点显示提示框中的数据格式
tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
label: {
show: true,
color: "#fff",
position: 'top',
//折线节点显示的数据格式
formatter:function(params){
return (params.value)+'%'
}
},
lineStyle: {color: "#04D8C9"},
data: [40, 60, 50, 55, 70, 80, 65, 67,80,70,75,80]
} ,
......
]
2、折现样式配置
series: [
{
lineStyle: {
color: "#DBDF63",//用于设置折线颜色
width: 2,//折现粗细
},
data: [2.0, 3.1, 3.4, 3.3, 2.89, 2.69,3.2,3.5,2.99,3.43,3.66],
type: 'line',
symbol:'circle',//用于设置形状如: circle、rect、roundRect、triangle等
symbolSize:[8,8],//用于设置大小,[8,8] 表示symbol的宽为8，高为8。可以简写为symbolSize:8
itemStyle:{
color:'#DBDF63',//用于设置折线图上坐标点颜色
}
}
],
3、echarts如何添加标题
this.option1 = {
title: [
{
left: 'center',//标题位置设置
top: 15,//标题位置设置
text: '主标题',
textStyle:{
color:'#0CFFFF',//标题颜色
},
},
{
right: 20,//标题位置设置
top: 40,//标题位置设置
text: '副标题',
textStyle:{
color:'#ffffff',
fontWeight:'normal',//标题字体粗细'normal','bold','bolder','lighter',数值：100-700
fontSize: 15,//标题字体大小
},
},
],
}
4、折线图拐点隐藏
添加 symbol: "none"配置
series: [
{
name: "类别",
type: 'line',
symbol: "none",//不显示拐点
tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
label: {
show: false,
color: "#fff",
position: 'top',
formatter:function(params){
return (params.value)+'%'
}
},
lineStyle: {color: "#6BC5E7"},
data: [1.2, 1.6, 0.3, 0.4, 0.1, 0.6, 0.7, 0.9, 0.7, 0.2, 0.3, 0.5, 0.1],
} ,
],