The text is not as good as the table, and the table is not as good as the picture. Last time, I introduced the related concepts and usage steps of ECharts. Please see
Data Visualization - First Experience with ECharts (1).
Another sentence is that the best documentation is on the official website. It is better to read the official website carefully than to read anyone's blog. , how to access the official website
- Click here click click click
- Official website address: https://echarts.apache.org/zh/index.html, copy it to the browser and open it
- Directly Baidu, echarts
This time, let us learn together, ECharts general configuration
ECharts general configuration
1 title (title)
Title component, including main title and subtitle.
text (title text)
text: String main title text, supports \n line breaks.
textStyle(text style)
The configuration is an object
color
Color can be expressed in RGB, such as 'rgb(128, 128, 128)'. If you want to add an alpha channel, you can use RGBA, such as 'rgba(128, 128, 128, 0.5)', or hexadecimal. Format, such as '#ccc'
color: title text color
fontStyle
fontStyle: Title text style
- ‘normal’
- ‘italic’
- ‘oblique’
fontWeight
fontWeight: The thickness of the main title text font.
- ‘normal’
- ‘bold’
- ‘bolder’
- ‘lighter’
- 100 | 200 | 300 | 400…
fontSize
fontSize: The font size of the main title text. -----number, the value is a number, be careful not to write the unit
title border
borderWidth
The border line width of the title. -----number, the value is a number, be careful not to write the unit
borderColor
The title's border color.
Color can be expressed in RGB, such as 'rgb(128, 128, 128)'. If you want to add an alpha channel, you can use RGBA, such as 'rgba(128, 128, 128, 0.5)', or hexadecimal. format, such as '#ccc'
borderRadius
Corner radius, unit px, supports passing in an array to specify 4 corner radii respectively. like:
borderRadius: 5, // Set the rounded corners of the four corners uniformly
borderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, lower right, lower left)
title position
top
The distance between the title component and the upper side of the container.
The value of top can be a specific pixel value like 20, a percentage relative to the height and width of the container like '20%', or it can be 'top', 'middle', 'bottom'.
If the value of top is 'top', 'middle', 'bottom', the components will be automatically aligned according to the corresponding position.
right
The distance between the title component and the right side of the container.
The value of right can be a specific pixel value like 20, or a percentage relative to the height and width of the container like '20%'.
Adaptive by default.
bottom
The distance between the title component and the lower side of the container.
The value of bottom can be a specific pixel value like 20, or a percentage relative to the height and width of the container like '20%'.
Adaptive by default.
left
The distance between the title component and the left side of the container.
The value of left can be a specific pixel value like 20, a percentage relative to the height and width of the container like '20%', or 'left', 'center', 'right'.
If the value of left is 'left', 'center', 'right', the components will be automatically aligned according to the corresponding position.
This title is set to the style in the picture below
2 tooltip (prompt box component)
trigger
Trigger type, three parameters:
- The item will only be triggered when the mouse enters the column.
- axis is triggered when the mouse enters the axis where the column is located.
- none: nothing triggers
triggerOn
Conditions for prompt box to trigger
- .click click trigger
- mousemove will be triggered when the mouse slides over it, default value
formatter
Prompt box floating layer content formatter, supports two forms: string template and callback function
- Template string example: '{b}'s grade is {c}'
- callback function, for example:
formatter: function (arg) {
//借助回调函数中的参数
console.log(arg);
// return "hehe"
return arg.name + '的成绩是：' + arg.data
}
The effect of tooltip is as shown below. This effect is click and item.
tooltip: {
trigger: 'axis',
triggerOn: 'mousemove',
formatter: function (arg) {
//借助回调函数中的参数
console.log(arg);
// return "hehe"
return arg.name + '的成绩是：' + arg.data
}
}
The effect of axis + mousemove
tooltip: {
trigger: 'axis',
triggerOn: 'mousemove',
formatter: '{b}的{a}成绩是{c}'
}
toolbox
toolbox toolbar. It has five built-in tools: export pictures, data view, dynamic type switching, data area zoom, and reset.
feature (configuration items for each tool)
saveAsImage (save as image)
dataView (data view)
restore
dataZoom (area zoom)
magicType (dynamic type switching)
example:
toolbox: {
// 各工具配置项
feature: {
saveAsImage: {
}, //保存图片
dataView: {
}, // 数据视图
restore: {
}, // 重置
dataZoom: {
}, // 区域缩放
magicType: {
// 动态类型切换
type: ['bar' , 'line']
}
}
}
Overall effect display
legend
data
// legend: 图例，用于筛选系列，需要和series配合使用
legend:{
//这里data的数据必须和series中name的值一致
data: ['语文','数学']
},
Series is also needed to match
var xData = ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃'],
yData = [65, 78, 98, 100, 59, 86, 76, 89.5];
//多定义一个数组
yData2 = [69, 82, 89, 95, 70, 95, 84, 90];
series
series: [{
name: '语文',
type: 'bar',
data: yData
},{
name: '数学',
type: 'bar',
data: yData2
}]
This is the effect.
The final complete code is here. Thank you for your support.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柱状图</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
let oDiv = document.querySelector('div');
var xData = ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃'],
yData = [65, 78, 98, 100, 59, 86, 76, 89.5];
yData2 = [69, 82, 89, 95, 70, 95, 84, 90];
var mCharts = echarts.init(oDiv);
var option = {
title: {
// 标题文字
text: '成绩展示',
// 文字样式
textStyle: {
color: '#7c7c7c'
},
// 标题边框
borderWidth: 5,
borderColor: '#c00',
borderRadius: 5,
// 标题所在位置
// left:400,
// top: 10
},
tooltip: {
// trigger 触发类型 三个参数
// item 鼠标进入柱内才会触发
trigger: 'axis',
// axis 鼠标进入柱所在的轴就会触发
// trigger: 'axis',
// none: 怎样都不触发
// trigger: 'none'
// triggerOn 提示框触发的条件
// 点击触发，默认时mousemove 鼠标滑过就会触发
triggerOn: 'mousemove',
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 字符串模板
// formatter: '{b}的成绩是{c}'
// formatter: function (arg) { //借助回调函数中的参数
// console.log(arg);
// // return "hehe"
// return arg.name + '的成绩是：' + arg.data
// }
},
// toolbox 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox: {
// 各工具配置项
feature: {
saveAsImage: {
}, //保存图片
dataView: {
}, // 数据视图
restore: {
}, // 重置
dataZoom: {
}, // 区域缩放
magicType: {
// 动态类型切换
type: ['bar' , 'line']
}
}
},
// legend: 图例，用于筛选简历，需要和series配合使用
legend:{
data: ['语文','数学']
},
xAxis: {
type: 'category',
name: '姓名',
nameLocation: 'start',
data: xData
},
yAxis: {
name: '得分',
nameLocation: 'start',
type: 'value'
},
series: [{
name: '语文',
type: 'bar',
data: yData
},{
name: '数学',
type: 'bar',
data: yData2
}]
}
mCharts.setOption(option)
</script>
</body>
</html>
I have said so much, but I still have to repeat one sentence, the most important thing to learn ECharts is to read the official website, read the official website, read the official website! ! !
Take the time to browse the Internet and click on the configuration items
. If you don’t know how to click, copy it: https://echarts.apache.org/zh/option.html#title