ECharts 折线图 / 柱状图 ,通用配置标注示例
option = {
tooltip: { // 关于提示框(tooltip)的配置
// 显示某一个去掉trigger: 'axis',显示一起显示 trigger: 'axis'
trigger: 'axis'
},
legend: {
top: 'bottom', // 显示标注位置
// textStyle: {
// color: "#000", // 设置图例文字颜色
// fontSize: 12 // 设置图例文字大小
// },
// icon: 'circle', // 设置图例图标为圆形
// itemWidth: 10, // 显示标注左侧图片的宽度
// itemHeight: 10, // 显示标注左侧图片的高度
itemGap: 34 // 间距
},
grid: {
top: '8%', // 控制与边框的距离
left: '3%',
right: '6%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true, // x轴文字是否不挨到y轴
data: ['01-01', '02-01', '03-01', '04-01', '05-01', '06-01', '07-01', '08-01', '09-01', '10-01'],
// splitLine: { // 网格线
// show: true, // 是否显示所有竖向网格线
// lineStyle: {
// color: ["#3E6CB1"], // 网格线颜色
// width: 1, // 网格线宽度
// // type: 'dashed' // 网格线类型:dashed虚线
// },
// },
axisLine: {
lineStyle: {
color: '#3E6CB1' // 设置x轴的颜色
}
},
axisLabel: {
textStyle: {
color: 'red', // 设置x轴文字颜色
fontSize: 12 // 设置文字大小
}
},
axisTick: {
show: false, // 是否显示坐标轴刻度
}
},
yAxis: {
// name: '%', // 顶部显示单位
axisLabel: {
color: "#000", // 设置y轴文字颜色
fontSize: 12, // 设置文字大小
},
splitLine: { // 网格线
show: true, // 是否显示所有横向网格线
lineStyle: {
color: ["#3E6CB1"], // 网格线颜色
width: 1, // 网格线宽度
// type: 'dashed' // 网格线类型:dashed虚线
},
}
},
color: [
'#9C50FF', '#509BFF', '#FFA850'
],
series: [
{
name: '示例1',
type: 'line', // 图表类型:line折线图,bar柱状图
smooth: false, // 折线图拐点:默认样式
data: [120, 132, 101, 134, 90, 230, 210, 90, 230, 210]
},
{
name: '示例2',
type: 'line',
smooth: true, // 折线图拐点:弯曲
data: [220, 182, 191, 234, 290, 330, 310, 290, 330, 310]
},
{
name: '示例3',
type: 'bar', // 图表类型:line折线图,bar柱状图
smooth: true,
data: [150, 232, 201, 154, 190, 330, 410, 190, 330, 410]
},
]
}
ECharts官网:(直接复制展示)
https://echarts.apache.org/examples/zh/editor.html?c=line-simple