基础

准备

1、引入Echarts

2、添加一个承载点，承载点需要有宽高

<div id="test" style="width:100%;height:300px;"></div>

3、把承载点初始化为echarts对象

const testEchats = echarts.init( document.getElementById('test') )

4、给echarts对象添加参数

test.setOption()

坐标轴

[1] 直角坐标系

1. xAxis：x轴
   • name: string：x轴的名字
   • data: array：x轴展示那些类目
   • boundaryGap: boolean：留白策略
2. yAxis：y轴
   • 一般直接定义即可

xAxis: {
    name: '语言',
    data: ['java', 'javascript', 'c']
},
yAxis: {}

[2] 极坐标系

title —— 标题

图表的标题

• text: string：标题
• subtext: string：副标题
• textStyle: object：标题的样式
• subtextStyle: object：副标题样式

title: {
    text: '标题',
    subtext: '副标题'
    textStyle: {
        color: 'red', // 颜色
        fontSize: 28 // 大小
    }
}

令标题居中

title: {
 left: 'center'
}

toolbox —— 工具栏

提供操作图表的工具

• feature: object：各工具的配置项
  • saveAsImage: obejct ：保存为图片
  • dataZoom: obejct：图片区域缩放
  • restore: obejct：配置项还原
  • magicType: obejct：图标类型动态切换

toolbox: {
    feature: {
        saveAsImage: {},
        restore: {},
        dataZoom: {}
    }
}

series —— 系列

数据

• {}：一个对象即是一种数据
  • name: string：数据种类的名字，区分不同种类数据，并且可显示名字在一些地方
  • type: string：这种数据使用的图表类型
  • data: array：数据
  • label: object：标签
    • show: boolean：展示
    • position：标签位置（top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight）
• markPoint: object：图标标注
  • data: array：标注的数据数组
    • { type: 'max' }：标注最大值
    • { type: 'min' }：标注最小值
    • { type: 'average' }：标注平均值
    • { name: '某个数据', coord: [10, 20] }：标注 (10, 20) 坐标点
• markLine: object：图标注线
  • data: array：标注的数据数组
    • { type: 'max' }：标注最大值
    • { type: 'min' }：标注最小值
    • { type: 'average' }：标注平均值
    • { name: '某个数据', coord: [10, 20] }：标注 (10, 20) 坐标点

series: [
    {
        name: '种类1',
        type: 'bar',
        data: [100, 200, 300]
    },
    markPoint: {
    	data: [
    		{ type: 'max' }
		]
    }
]

legend —— 图例

展现了不同系列的标记、颜色和名字

• data: array：展示系列中那种数据的说明

legend: {
    data: ['人数', '难度']
}

tooltip —— 提示框

可以将数据值映射到图形的形状、大小、颜色等

tooltip: {}