ECharts编码规范

1. 引入方式

Bad

<script src="echarts.min.js"></script>

Good

<!-- 引入官方CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

使用官方CDN可以确保获取到最新的稳定版本。

2. 初始化图表

Bad

let chart = echarts.init(document.getElementById('main'));
chart.setOption({});

Good

let chart = echarts.init(document.getElementById('main'), 'light');
chart.setOption(option);

使用主题名称初始化图表，并在setOption时直接传入配置项。

3. 配置项结构

Bad

let option = {
  title: 'Title',
  xAxis: { data: [] },
  yAxis: {},
  series: [{ name: 'Series', type: 'bar', data: [] }]
};

Good

let option = {
  title: {
    text: 'Title'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: 'Series',
    type: 'bar',
    data: []
  }]
};

使用完整的配置结构，即使某些属性为空。

4. 数据绑定

Bad

option.xAxis.data = ['A', 'B', 'C'];
chart.setOption(option);

Good

option.xAxis.data = ['A', 'B', 'C'];
chart.setOption({ xAxis: option.xAxis });

仅更新需要改变的部分，避免整个配置项的重新赋值。

5. 响应式设计

Bad

let option = {
  grid: {
    left: '100px',
    right: '100px'
  }
};

Good

let option = {
  grid: {
    left: '10%',
    right: '10%'
  }
};

使用百分比而非固定像素值，以适应不同屏幕尺寸。

6. 使用主题

Bad

let option = {};

Good

let option = {
  color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae']
};

自定义颜色主题以匹配网站或应用的颜色方案。

7. 使用工具提示

Bad

let option = {};

Good

let option = {
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      return params[0].name + ': ' + params[0].value;
    }
  }
};

添加工具提示以增强用户体验。

8. 使用图例

Bad

let option = {};

Good

let option = {
  legend: {
    data: ['Series A', 'Series B']
  }
};

使用图例来区分不同的数据系列。

9. 使用动画

Bad

let option = {};

Good

let option = {
  animation: true
};

开启动画效果，使图表更具吸引力。

10. 使用数据区域高亮

Bad

let option = {};

Good

let option = {
  visualMap: {
    min: 0,
    max: 100,
    calculable: true
  }
};

使用数据区域高亮来直观显示数据分布。

11. 使用时间轴

Bad

let option = {};

Good

let option = {
  timeline: {
    data: ['2015', '2016', '2017']
  }
};

使用时间轴来展示随时间变化的数据。

12. 使用事件监听

Bad

chart.on('click', function() {});

Good

chart.on('click', function(param) {
  console.log('Clicked point:', param);
});

使用事件监听器来响应用户的交互行为。

13. 使用自定义系列

Bad

let option = {};

Good

let option = {
  series: [{
    type: 'pie',
    radius: '55%',
    center: ['50%', '60%']
  }]
};

使用自定义系列来满足特定的可视化需求。

14. 使用扩展图表

Bad

let option = {};

Good

// 引入地图扩展
require.config({
  paths: {
    echarts: 'path/to/echarts',
    'echarts/map': 'path/to/maps'
  }
});
require(
  [
    'echarts',
    'echarts/chart/map', // 引入地图图表
    'echarts/map/js/world' // 引入世界地图
  ],
  function (ec) {
    let chart = ec.init(document.getElementById('main'));
    let option = {
      series: [{
        type: 'map',
        mapType: 'world'
      }]
    };
    chart.setOption(option);
  }
);

引入额外的图表类型，如地图。

15. 使用图表更新

Bad

chart.setOption({});

Good

chart.setOption({ series: [{ data: newData }] }, true);

更新图表数据时，使用第三个参数notMerge为false来合并配置项。

16. 使用缩放和平移

Bad

chart.dispatchAction({});

Good

chart.dispatchAction({
  type: 'zoom',
  xIndex: 0,
  start: 0.5,
  end: 0.8
});

使用dispatchAction来控制图表的缩放和平移。

17. 使用数据过滤

Bad

let option = {};

Good

let option = {
  series: [{
    type: 'scatter',
    data: data.filter(item => item.value > 10)
  }]
};

在数据源上应用过滤器，只显示符合条件的数据点。

18. 使用布局调整

Bad

let option = {};

Good

let option = {
  grid: {
    top: '20%',
    bottom: '20%',
    containLabel: true
  }
};

调整图表布局，使其在页面中占据合适的空间。

19. 使用自定义颜色

Bad

let option = {};

Good

let option = {
  series: [{
    type: 'line',
    itemStyle: {
      normal: {
        color: '#ff0000'
      }
    }
  }]
};

自定义图表元素的颜色。

20. 使用自定义字体

Bad

let option = {};

Good

let option = {
  title: {
    text: 'Title',
    textStyle: {
      fontFamily: 'Arial'
    }
  }
};

自定义标题或其他文本元素的字体。

21. 使用自定义图标

Bad

let option = {};

Good

let option = {
  series: [{
    type: 'scatter',
    symbol: 'path://M10,0 L0,10 L20,10 z'
  }]
};

使用SVG路径数据来自定义图表符号。

22. 使用自定义工具提示

Bad

let option = {};

Good

let option = {
  tooltip: {
    formatter: function (param) {
      return 'Value: ' + param.value;
    }
  }
};

自定义工具提示的显示格式。

23. 使用自定义图例

Bad

let option = {};

Good

let option = {
  legend: {
    data: ['Series A', 'Series B'],
    selected: {
      'Series A': true,
      'Series B': false
    }
  }
};

自定义图例的选择状态。

24. 使用自定义坐标轴

Bad

let option = {};

Good

let option = {
  xAxis: {
    type: 'time',
    splitLine: { show: false }
  }
};

自定义坐标轴的类型和样式。

25. 使用自定义数据标签

Bad

let option = {};

Good

let option = {
  series: [{
    type: 'bar',
    label: {
      show: true,
      position: 'top'
    }
  }]
};

自定义数据标签的位置和样式。

以上规范覆盖了一些基本的ECharts配置和最佳实践。然而，ECharts的功能远不止于此，它提供了丰富的配置项和扩展图表类型，可以根据具体需求进一步探索和应用。在实际项目中，应根据项目需求和团队编码风格来调整这些规范，以达到最佳的可视化效果和代码可维护性。