相关网站地址

官方示例
分享示例
ECharts 在线构建，定制化
主题编辑器 - Apache ECharts（自定义主题）

某些配置

改变画布内间距

  1. grid: {
  2.   top: 20,
  3.   right: 20,
  4.   bottom: 30,
  5.   left: 50,
  6. },

hover 后的轴线背景

  1. {
  2.   tooltip: {
  3.     trigger: 'axis',
  4.     axisPointer: {
  5.       type: 'shadow',
  6.     }
  7.   }
  8. }

轴线相关配置

  1. axisTick: {
  2.   // 刻度点线
  3.   show: false,
  4. },
  5. axisLine: {
  6.   // 轴线
  7.   lineStyle: {
  8.     color: '#FF0000',
  9.   },
  10. },
  11. splitLine: {
  12.   // 刻度盘中轴线
  13.   lineStyle: {
  14.     color: 'rgba(255, 255, 255, 0.15)',
  15.   },
  16. },

折线图

  1. {
  2.   grid: {
  3.     top: 10,
  4.     right: 10,
  5.     bottom: 40,
  6.     left: 30,
  7.   },
  8.   xAxis: {
  9.     type: 'category',
  10.     boundaryGap: false, // 轴线留白 
  11.     data: ['2020.11', '2020.12', '2021.01', '2021.02', '2021.03', '2021.04'],
  12.     axisLabel: { // 刻度文本
  13.       color: 'rgba(255, 255, 255, 1)',
  14.       rotate: 40, // 旋转
  15.     },
  16.     axisTick: {
  17.       show: false, // 去掉刻度点线
  18.     },
  19.   },
  20.   yAxis: {
  21.     type: 'value',
  22.     axisLabel: {
  23.       color: 'rgba(255, 255, 255, 1)',
  24.     },
  25.     splitLine: {
  26.       lineStyle: { // 轴线样式
  27.         color: 'rgba(255, 255, 255, 0.15)',
  28.       },
  29.     },
  30.   },
  31.   series: [
  32.     {
  33.       data: [0, 23, 10, 13, 19, 25],
  34.       type: 'line',
  35.       symbol: 'none', // 折线类型，不带圆点
  36.       itemStyle: {
  37.         color: '#ffffff',
  38.       },
  39.       areaStyle: { // 面积图渐变效果
  40.         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  41.           {
  42.             offset: 0,
  43.             color: 'rgba(14, 219, 201, 1)', // 0% 处
  44.           },
  45.           {
  46.             offset: 0.5,
  47.             color: 'rgba(14, 219, 201, 0.8)', // 50% 处
  48.           },
  49.           {
  50.             offset: 1,
  51.             color: 'rgba(14, 219, 201, 0)', // 100% 处
  52.           },
  53.         ]),
  54.       },
  55.     },
  56.   ],
  57.   tooltip: { // 提示区域效果
  58.     trigger: 'axis',
  59.     axisPointer: {
  60.       axis: 'x',
  61.       lineStyle: {
  62.         type: 'solid',
  63.       },
  64.     },
  65.     backgroundColor: '#002157',
  66.     borderWidth: 1,
  67.     borderColor: '#798CB2',
  68.     textStyle: {
  69.       fontSize: 12,
  70.       color: '#fff',
  71.     },
  72.     formatter: '{b} {c}次',
  73.   },
  74. }

问题汇总

series not exists. Legend data should be same with series name or data name

配置字段和数据字段名称不一致，或者数量不一致导致的。