1. 相关配置的讲解
xAxis: ** 直角坐标系中的X轴 **
yAxis ** 直角坐标系中的Y轴 **
series: ** 系列类列表,每个系列通过type决定了自己的图表类型 **
1. 最基础练习
Document// 3. 初始化Echarts实例对象
// 参数, dom,决定图表最终的呈现的位置
let myChart = echarts.init(document.querySelector("div"))
// 4. 准备配置项
var option = {
title: {
// id: '1', string 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
show: true, // 是否显示标题组件。boolean
text: "成绩", // 主标题文本,支持使用 \n 换行
link: "https://www.jianshu.com/u/59506f50569d", // string 主标题文本超链接。
target: 'blank', // string 指定窗口打开主标题超链接。 'self' 当前窗口打开 'blank' 新窗口打开
textStyle: {
color: "red", // Color 主标题文字的颜色。
fontStyle: 'normal', // string 主标题文字字体的风格。// 可选: 'normal' 'italic' 'oblique'
fontWeight: "normal" // stringnumber 主标题文字字体的粗细。
}
},
xAxis: {
type: "category", // 类目轴
data: ['小明', '小红', '小王']
},
yAxis: {
type: "value"
},
series: [{
name: "语文",
type: "bar", // 柱状图的名字叫做 bar line 折线图
data: [70, 92, 87]
}]
}
// 5. 将配置项设置给echarts实例对象
myChart.setOption(option)
示例图详解:
image.png