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