ECharts常用配置项

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, // 是否显示标题，默认truetext: "图表主标题文本", //主标题文本，支持使用 \n 换行。textStyle: { //设置主标题文字样式，颜色，字体，阴影等color: "#008DFF",},subtext: '图表副标题文本' ,left: 200, //title 组件离容器左侧的距离backgroundColor: '#ccc' //标题背景色，默认透明。},
});

xAxis 直角坐标系 grid 中的 x 轴

//配置直角坐标系 grid 中的 x 轴
xAxis: {show: true, // 是否显示 x 轴,默认truetype: "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 ,//是否支持选中,默认falseselect: { //配置数据选中时的图形样式和标签样式。开启 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系列会堆叠显示