Android使用ECharts详解简书,Echarts图表的详解(一)

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