Echarts基本配置

xAxis

直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的 呈现

yAxis

直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

series 系列列表

每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

配置项不需要死记硬背，可以查阅官方文档Documentation - Apache ECharts

通用配置

标题: title

var option = {
title: {
text: "成绩", // 标题文字
textStyle: {
color: 'red' // 文字颜色
},
borderWidth: 5, // 标题边框
borderColor: 'green', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 20, // 标题的位置
top: 20 // 标题的位置
}
}

提示框: tooltip

tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框

触发类型: trigger            可选值有item\axis

触发时机: triggerOn       可选值有 mouseOver\click

格式化显示: formatter    字符串模板

工具按钮: toolbox

toolbox 是 ECharts 提供的工具栏, 内置有 导出图片，数据视图, 重置, 数据区域缩放, 动态类型切 换五个工具 工具栏的按钮是配置在 feature 的节点之下

var option = {
toolbox: {
feature: {
saveAsImage: {}, // 将图表保存为图片
dataView: {}, // 是否显示出原始数据
restore: {}, // 还原图表
dataZoom: {}, // 数据缩放
magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
type: ['bar', 'line']
}
}
}
}

图例: legend

legend 是图例,用于筛选类别,需要和 series 配合使用 legend 中的 data 是一个数组 legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致。

 

 直角坐标配置：

 柱状图配置：

 折线图配置：

 散点图配置：

 饼图配置：

地图配置：

 

雷达图配置：

 

仪表盘配置：