ECharts common configuration
setOption() to draw a chart
Use the setOption() of the echarts instance to set the configuration items and data of the chart instance, the universal interface, and the modification of all parameters and data can setOptionbe done .
Call method: myChart.setOption(option); (option: required parameters, object type, configuration items and data including charts, and other optional parameters will not be described in detail.)
Such as simple histogram settings
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() common configuration items
In the parameter option of setOption(option), you can configure the properties and data of each chart component. There are many configurable properties. The following examples are shown selectively. For all properties, please refer to the official API.
title title component
Example:
myChart.setOption({
//配置图表标题组件
title: {
show: true, // 是否显示标题，默认true
text: "图表主标题文本", //主标题文本，支持使用 \n 换行。
textStyle: {
//设置主标题文字样式，颜色，字体，阴影等
color: "#008DFF",
},
subtext: '图表副标题文本' ,
left: 200, //title 组件离容器左侧的距离
backgroundColor: '#ccc' //标题背景色，默认透明。
},
});
xAxis The x-axis in the rectangular coordinate system grid
//配置直角坐标系 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 The y axis in the rectangular coordinate system grid
The y-axis attribute is similar to the x-axis attribute. It should be noted that the default value of the type attribute is different
yAxis: {
type: "value", //坐标轴类型。默认值value，x轴type默认值为category
},
A simple histogram configuration
myChart.setOption({
xAxis: {
data: ["足球","篮球","乒乓球","跳绳","健步走","呼啦圈", "踢毽","霹雳舞",],
},
yAxis: {
},
series: [
{
name: "参与人数",
type: "bar",
data: [100, 90, 80, 70, 10, 50, 40, 30, 20, 50],
},
],
});
If you need to change the vertical histogram to a horizontal histogram, you need to change the type of the x-axis and y-axis, and change the configuration of the above example as follows
myChart.setOption({
xAxis: {
type: "value",
},
yAxis: {
type: "category",
data: ["足球","篮球","乒乓球","跳绳","健步走","呼啦圈", "踢毽","霹雳舞",],
},
series: [
{
name: "参与人数",
type: "bar",
data: [100, 90, 80, 70, 10, 50, 40, 30, 20, 50],
},
],
});
Note: Regardless of whether it is on the x-axis or the y-axis, if type is not set but axis.data is set, the type is considered to be 'category'. If the type is set to 'category', but axis.data is not set, the content of axis.data will be automatically obtained from series.data
legend
Legend component.
The legend component presents the different series of symbols, colors and names. Which series are not displayed can be controlled by clicking on the legend. See the first example below for an example, where the arrow points in the figure is the legend component.
series style data etc.
The value of the series property is an array, which can contain one or more objects, one object corresponds to a series of icons, and the properties in the configuration object can change the series chart type, style, etc.
-
Common values for the type attribute:
line——line/area chart
bar - histogram
pie - pie chart
scatter - scatter (bubble) chart
radar - radar map
The following configuration chart displays a line chart and a histogram at the same time. The name attribute cooperates with the legend component to filter the legend and selectively display a series of charts
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],
},
],
});
Different types of graphs may contain different properties that need to be configured, and only some of them are listed below
Common properties of histograms:
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 attribute: Regarding barWidth, the official document states: "On the same coordinate system, this attribute will be shared by multiple 'bar' series." However, the test found that it is not shared. If only barWidth is set in one bar series, the other If the bar series is not set, only the width of the set bar series is the specified width, and the width of the other bar series is adaptive or even not displayed. It is necessary to set barWidth for both bar series to display normally
② stack attribute: Another histogram of data stacking, just add attributes to each bar series . Currently, stack only supports stacking on category axes of type 'value' and 'log', and does not support 'time' and 'log' Category axis of type 'category'.
stack: 'all',//值可以是任意字符串，设置相同stack值的bar系列会堆叠显示
