Echarts 官网
echarts.apache.org/handbook/zh… Echarts官网
www.makeapie.cn/echarts Echarts 社区
www.npmjs.com/package/ech… Echarts 曲线数据。
www.w3cschool.cn/echarts_tut… Echarts教学
打开所有实例，进行编写，最后在拿数据option到代码中使用即可。
代码块级别使用：
图表代码演示
url 在线编辑---地址
option = {
title: {
text: '男女薪资分布',
left: 'center'
},
// 设置坐标 只在当前圆盘才触发
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
// 颜色
color: [
'#fda224',
'#5097ff',
'#3abcfa',
'#34d39a'
],
series: [
{
name: 'Access From',
type: 'pie',
radius:['50%','70%'],//实心空心设置间距内外间距
avoidLabelOverlap:true,
data: [
{ value: 208, name: '1万以下' },
{ value: 735, name: '1-1.5万' },
{ value: 680, name: '1.5-2万' },
{ value: 884, name: '2万以上' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: '10px' //圆角边框
}
}
}
]
};
树状图代码演示
option = {
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'category',
data: [
'熊勇',
'于强',
'程艳',
'田平',
'譚力',
'侯强',
'乔艳',
'徐磊',
'熊强',
'徐刚'
]
}
],
yAxis: {
type: 'value'
},
// 如果是多个 就要数组填写 两个对象即可
color: [
{
// 是否投影 colorStops = 颜色
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#34d39a' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
// 是否投影 colorStops = 颜色
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#5097ff' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
],
series: [
{
name: '期望薪资',
data: [60, 80, 150, 80, 70, 110, 130, 130, 155, 169],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: '实际薪资',
data: [80, 120, 100, 86, 170, 150, 60, 180, 165, 173],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
折线图
option = {
title: {
show: true,
text: '2023全学科薪资走势图'
},
xAxis: {
type: 'category',
data: [
'1',
'2',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'
]
},
yAxis: {
type: 'value'
},
// 坐标轴指示器配置项。
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross' //十字准星指示器。不穿了，有一个西服就行
}
},
// 渐变阴影色 线性色
color: {
// 阴影部分
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
// 实现部分
colorStops: [
{
offset: 0,
color: '#4b9cee' // 0% 处的颜色
},
{
offset: 0.5,
color: '#5489ef' // 50% 处的颜色
},
{
offset: 1,
color: '#5d77f0' // 100% 处的颜色
}
]
},
series: [
{
showSymbol:true,//开启圆点
data: [820, 1332, 901, 1234, 1290, 930, 800, 1530, 1220, 1360, 1320],
type: 'line',
smooth: true,
// 颜色线
// symbol: 'circle',//实心圆 空心圆= 默认
symbolSize: '10',
lineStyle: {
width: 3,
}
// 线条阴影颜色
}
]
};
两个饼图
option = {
title: {
text: '男女薪资分布',
left: '100px'
},
// 设置坐标 只在当前圆盘才触发
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
// 颜色
color: [
'#fda224',
'#5097ff',
'#3abcfa',
'#34d39a'
],
series: [
{
name: 'Access From',
type: 'pie',
radius:['20%','35%'],//实心空心设置间距内外间距
avoidLabelOverlap:true,
center:['50%','20%'],//饼图坐标
data: [
{ value: 208, name: '1万以下' },
{ value: 735, name: '1-1.5万' },
{ value: 680, name: '1.5-2万' },
{ value: 884, name: '2万以上' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: '10px' //圆角边框
}
}
},
// 2
{
name: 'Access From',
type: 'pie',
radius:['20%','35%'],//实心空心设置间距内外间距
center:["50%",'70%'],
avoidLabelOverlap:true,
data: [
{ value: 208, name: '1万以下' },
{ value: 735, name: '1-1.5万' },
{ value: 680, name: '1.5-2万' },
{ value: 884, name: '2万以上' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: '10px' //圆角边框
}
}
}
]
};
