前言:
哈喽,大家好,我是码喽的自我修养!今天给大家分享【 Echarts各类图表常用配置项说明 】,并提供具体代码帮助大家深入理解,彻底掌握!原创不易,如果能帮助到带大家,欢迎收藏+关注 哦 💕
🌈🌈文章目录
一、Echarts配置项详解
(一)标题组件title
1.text:主标题文本
2.subtext:副标题文本
3.left:标题的位置,可选:'left', 'right', 'center'
(二)提示框组件tooltip
1.trigger:触发类型:坐标轴触发,可选:'axis' 坐标轴触发,'item' 数据项触发
2.axisPointer{ // 坐标轴指示器配置项
type: 'shadow' // 指示器类型:'shadow' 阴影,可选:'line' 直线,'shadow' 阴影}
(三)图例组件legend
1.data:[ ] 图例的数据数组
2.top:'bottom' // 图例的位置,可选:'top', 'bottom', 'left', 'right'
(四)工具箱toolbox
1.show:true 是否显示工具箱
2.feature: { //各工具配置项
mark: {show: true},
dataView: {show: true, readOnly: false}, // 数据视图工具,是否只读
magicType: {show: true, type: ['line', 'bar', 'stack']}, // 图表类型切换
restore: {show: true}, // 配置项还原工具
saveAsImage: {show: true} // 保存为图片工具
}
(五)直角坐标系内绘图网格grid
1.left:’3%’ // 网格左侧的距离
2.right:’3%’ //网格右侧的距离
3.bottom:’3%’ //网格底部的距离
4.containLabel: true // 网格区域是否包含坐标轴的刻度标签
(六)X轴配置xAxis
1.type:'category', // 类型:'category' 类目轴,'value' 数值轴
2.data:[ ], //类目数据
3.axisTick:{ //刻度线配置
alignWithLabel: true // 刻度线和标签是否对齐
}
(七)Y轴配置yAxis
1.type:value, // 类型:'category' 类目轴,'value' 数值轴
(八)系列列表serise
1.name: 系列名称,
2.type: ’bar’, // 类型:'bar' 柱状图,'line' 线图,'pie' 饼图等
3.barWidth: ‘20%’ //柱条宽度
4.data: [10, 52, 200, 334, 390] // 系列中的数据值
二、配置示例代码
(一)折线图示例
1.示例代码
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
2.实现效果
(二)柱状图示例
1.示例代码
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
option && myChart.setOption(option);
2.实现效果
(三)饼图示例
1.示例代码
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
};
option && myChart.setOption(option);
2.实现效果
好了,本文就到这里吧,点个关注再走嘛~
🚀 个人简介:某大型国企资深软件开发工程师,信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家,分享前端后端相关技术与工作常见问题~
💟 作 者:码喽的自我修养❣️
📝 专 栏:GIS地图与大数据可视化
🌈 若有帮助,还请 关注➕点赞➕收藏 ,不行的话我再努努力💪💪💪
更多专栏订阅推荐:
👍 前端工程搭建
💕 javaScript基础✈️ HTML5与CSS3
⭐️ uniapp与微信小程序
✍️ GIS地图与大数据可视化