【Echarts】入门

1、引入方式

1.1. 从GitHub获取：下载地址：https://www.jsdelivr.com/package/npm/echarts
选择 dist/echarts.js，点击并保存为 echarts.js 文件
1.2. 从cdn获取：https://lib.baomitu.com/echarts/4.7.0/echarts.min.js

2、使用方式

2.1. 引入 echarts.js 文件

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

2.2.建立DOM容器：为 ECharts 准备一个定义了宽高的 DOM，初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。

<div id="main" style="width: 600px;height:400px;">div>
1

2.3.基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));
1

2.4.指定图表的配置项和数据

var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.5.显示图表：使用刚指定的配置项和数据显示图表。

myChart.setOption(option);
1

3、常用配置项

官网参考：https://echarts.apache.org/zh/option.html#title

3.1. 标题 title

const option = {
    title: { //title的各个属性
          text: '前端',
          left: 'center',
          subtext: 'echarts',
          textStyle: {
            color:'#333',
            fontSize: 24
          },
          subtextStyle: {
            color: '#333',
            fontSize: 12
          },
        },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.2. 类目
x轴类目：xAxis
y轴类目：yAxis

xAxis: {
          data: ['css', 'html', 'js', 'ts', 'vue', 'react']
        },
yAxis: {},
1
2
3
4

3.3. 提示框 tooltip

tooltip:{
      trigger:'item'
}
1
2
3

3.4. 系列 series
一个系列就写对象，多个系列就写数组

series: [
          {
            name: '书本',
            type: 'bar',
            data: [8, 20, 36, 10, 10, 24],
            colorBy:'series'
          },
          {
            name: '练习',
            type: 'bar',
            data: [5, 12, 12, 5, 34, 76],
            colorBy: 'series'
          },
          {
            name: '销量',
            type: 'bar',
            data: [3, 24, 36, 21, 45, 43],
            colorBy: 'series'
          }
        ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.5. 颜色
系列颜色：color
调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
背景颜色：backgroundColor

color:['#d87c7c','#919e8b','#d7ab82','#6e7074','#61a0a8','#efa18d'],
backgroundColor:'rgba(254,248,239,1)',
1
2

页面渲染效果如下：

4、数据集 dataset

使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

参考地址：https://echarts.apache.org/zh/option.html#dataset.dimensions

把数据集（ dataset ）的行或列映射为系列（series）

var mapOption = {
            // 方法一
            dataset: {
                dimensions: ['product', '2005', '2006', '2007'],//定义列
                source: [
                    { product: '中华小子', '2005': 43.3, '2006': 85.8, '2007': 93.7 },
                    { product: '虹猫蓝兔七侠传', '2005': 83.1, '2006': 73.4, '2007': 55.1 },
                    { product: '神厨小福贵', '2005': 86.4, '2006': 65.2, '2007': 82.5 },
                    { product: '神兵小将', '2005': 72.4, '2006': 53.9, '2007': 39.1 }
                ]
            },
             // 方法二：
            dataset: {
                
                source: [
                     ['product', '2005', '2006', '2007'],//定义列
                     // 行数据
                     [ '中华小子',43.3,85.8,93.7],
                     ['虹猫蓝兔七侠传', 83.1,73.4, 55.1],
                     ['神厨小福贵',86.4, 65.2,82.5],
                     ['神兵小将',72.4,53.9,39.1]
                ]
            },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

数据到图形的映射（ series.encode ）

var gardenOption = {
                dataset: {
                    source: [
                        ['score', 'amount', 'product'],
                        [89.3, 58212, '栀子花'],
                        [57.1, 78254, '海棠花'],
                        [74.4, 41032, '丁香'],
                        [50.1, 12755, '水仙'],
                        [89.7, 20145, '茉莉'],
                        [68.1, 79146, '茶花'],
                    ]
                },
                color: ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d'],
                backgroundColor: 'rgba(254,248,239,1)',
                xAxis: {},
                yAxis: { type: 'category' },
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            x: 'amount',
                            // 将 "product" 列映射到 Y 轴。
                            y: 'product'
                        },
                        colorBy: 'data',
                    }
                ],
                tooltip: {
                    trigger: 'item'
                }
            };
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

我是小编kk， 遇到Bug需要帮助， 欢迎加wx： xmzl1988 备注"csdn博客“ 温馨提示此为有偿服务;