ECharts常用配置
setOption()绘制图表
使用 echarts 实例的 setOption() 可以设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成。
调用方式：myChart.setOption(option); （option：必填参数，对象类型，包含图表的配置项和数据，还有其它可选参数暂不细说。）
如简单柱状图设置
let myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
xAxis: {
data: ["足球", "篮球", "乒乓球", "跳绳", "健步走", "呼啦圈", "踢毽", "霹雳舞"],
},
yAxis: {
},
series: [
{
name: "参与人数",
type: "bar",
data: [100, 90, 80, 70, 10, 50, 40, 30, 20, 50],
},
],
});
setOption()常用配置项
在 setOption(option) 的参数 option 中可以配置各图表组件的属性，数据等，可配置属性很多，以下示例选择性展示，全部属性可参考官方API。
title 标题组件
示例：
myChart.setOption({
//配置图表标题组件
title: {
show: true, // 是否显示标题，默认true
text: "图表主标题文本", //主标题文本，支持使用 \n 换行。
textStyle: {
//设置主标题文字样式，颜色，字体，阴影等
color: "#008DFF",
},
subtext: '图表副标题文本' ,
left: 200, //title 组件离容器左侧的距离
backgroundColor: '#ccc' //标题背景色，默认透明。
},
});
xAxis 直角坐标系 grid 中的 x 轴
//配置直角坐标系 grid 中的 x 轴
xAxis: {
show: true, // 是否显示 x 轴,默认true
type: "category", //坐标轴类型。默认category(类目轴)，其他值：value(数值轴),time(时间轴),log(对数轴)
name: "x轴名字", //坐标轴名称。
nameLocation: "center", //坐标轴名称显示位置。
nameTextStyle: {
}, //坐标轴名称的文字样式
inverse: true, //是否是反向坐标轴。默认false
axisLabel:{
//坐标轴刻度标签的相关设置。
show: true, //是否显示刻度标签。
color: "red", //刻度标签文字的颜色，默认取 axisLine.lineStyle.color。支持回调函数
},
data: [
"足球",
"篮球",
"乒乓球",
"跳绳",
"健步走",
"呼啦圈",
"踢毽",
{
value: "霹雳舞",
textStyle: {
fontSize: 20, color: "red"},//类目标签的文字样式
},
],
//Array,类目数据，在类目轴（type: 'category'）中有效。
//如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
//如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取
},
yAxis 直角坐标系 grid 中的 y 轴
y轴属性与x轴属性相似，需特别注意的是，type属性默认值不同
yAxis: {
type: "value", //坐标轴类型。默认值value，x轴type默认值为category
},
一个简单柱状图配置
myChart.setOption({
xAxis: {
data: ["足球","篮球","乒乓球","跳绳","健步走","呼啦圈", "踢毽","霹雳舞",],
},
yAxis: {
},
series: [
{
name: "参与人数",
type: "bar",
data: [100, 90, 80, 70, 10, 50, 40, 30, 20, 50],
},
],
});
如需将竖柱状图改为横柱状图，需要更改x轴与y轴的type，将上例更改配置如下
myChart.setOption({
xAxis: {
type: "value",
},
yAxis: {
type: "category",
data: ["足球","篮球","乒乓球","跳绳","健步走","呼啦圈", "踢毽","霹雳舞",],
},
series: [
{
name: "参与人数",
type: "bar",
data: [100, 90, 80, 70, 10, 50, 40, 30, 20, 50],
},
],
});
注：不管在x轴还是y轴，如果没有设置 type，但是设置了 axis.data，则认为 type 是 ‘category’。如果设置了 type 是 ‘category’，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取
legend
图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。示例见下方第一个例子，图中箭头指向处就是图例组件。
series 样式数据等
series属性值是数组，数组中可包含一个或多个对象，一个对象对应一个系列的图标，配置对象中的属性可以更改系列图表类型，样式等。
-
type 属性常用值：
line——折线/面积图
bar——柱状图
pie——饼图
scatter——散点（气泡）图
radar——雷达图
以下配置图表中同时显示一个折线图和一条柱状图，name属性配合 legend 组件，可进行图例筛选，选择性显示某一系列图表
myChart.setOption({
xAxis: {
data: ["足球","篮球","乒乓球","跳绳","健步走","呼啦圈", "踢毽","霹雳舞",],
},
yAxis: {
},
legend: {
data: ['参与人数', '观赛人数']
},
series: [
{
name: "观赛人数",
type: "line",
data: [100, 90, 70, 40, 20, 50, 30, 60],
},
{
name: "参与人数",
type: "bar",
data: [90, 80, 75, 60, 10, 50, 40, 30],
},
],
});
不同类型图可能包含不同需要配置的属性，以下只列举部分
柱状图常用属性：
myChart.setOption({
xAxis: {
data: ["足球","篮球","乒乓球","跳绳","健步走","呼啦圈", "踢毽","霹雳舞",],
},
yAxis: {
},
legend: {
data: ['人数', '参与人数']
},
series: [
{
name: "人数",
type: "bar",//必须
data: [20, 40, 75, 30, 10, 50, 60, 30],
barWidth: 30,
},
{
name: "参与人数",//配合 legend 配置项，可进行图例筛选
type: "bar",//必须
data: [90, 80, 75, 60, 10, 50, 40, 30],
label: {
//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
show: true,//是否显示
position: 'top'//标签的位置
},
itemStyle: {
//图形样式
color: "#59c4e6", //柱条的颜色(可配置渐变色)。 默认从全局调色盘 option.color 获取颜色。
},
barWidth: 30,//柱条的宽度，不设时自适应。
selectedMode: true ,//是否支持选中,默认false
select: {
//配置数据选中时的图形样式和标签样式。开启 selectedMode 后有效。
itemStyle: {
color: "#edafda", //选中的柱条颜色(可配置渐变色)
},
}
},
],
});
},
① barWidth属性：关于 barWidth，官方文档说法：“在同一坐标系上，此属性会被多个 ‘bar’ 系列共享。”，但测试发现并不共享，如果只在一个bar系列设置 barWidth，另一个bar系列不设置，则只有设置的bar系列宽度是指定宽度，另一 bar 系列宽度自适应或甚至不显示，需要两个 bar 系列都设定 barWidth 才显示正常
② stack属性：另一种数据堆叠的柱状图，只需在每个bar系列中添加属性，目前 stack 只支持堆叠于 ‘value’ 和 ‘log’ 类型的类目轴上，不支持 ‘time’ 和 ‘category’ 类型的类目轴。
stack: 'all',//值可以是任意字符串，设置相同stack值的bar系列会堆叠显示
