# 快速上手

WARNING

该图表规范是基于 Apache ECharts 基础上再次开发，提供了深、浅两套背景主题，包含纯色及渐变方案，提取业务中高频使用的图表样例，重点对图表的视觉样式及交互效果进行升级改造。

# 1、在项目中安装 Apache ECharts

请参考官方文档获取并引入 Apache ECharts

npm install echarts --save

# 2、下载主题文件

进入 主题配色方案 中，选择主题，点击下载

// 1.将下载后的主题保存至 *.json 文件
// 2.读取该 JSON 文件；
import CustomedThemeConfig from 'customed.json'

1
2
3

# 3、示例

请移步至 图表示例 中选择你需要的图表

<script>
  import * as Echarts from 'echarts' // 引入 Echarts
  import CustomedThemeConfig from 'customed.json' // 获取下载的主题文件

  export default {
    methods: {
      /**
       * 绘制
       */
      drawChart() {
        const chartDom = this.$refs.chart
        if (!chartDom) return

        // 调用 echarts.registerTheme('customed', obj) 注册主题；
        // 使用 echarts.init(dom, 'customed') 创建图表，第二个参数即为刚才注册的主题名字。
        Echarts.registerTheme('customed', CustomedThemeConfig)
        const instance = (this.chart = Echarts.init(chartDom, 'customed'))

        const option = this.initChartOptions()
        instance.setOption(option)
      },
      initChartOptions() {
        return {
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [{
            data: [],
            type: 'line',
          }],
        }
      },
    },
    data() {
      return {
        chart: null,
      }
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44