环境:vue2 + element-ui
echarts版本:5.4.0
安装:
npm install echarts --save
需要的页面引用:
import * as echarts from 'echarts';
针对于柱形图:
<div id="main" :style="{width: '100%', height: 350 + 'px'}"></div>
// 设置容器以及数据配置
getEcharts() {
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ['车道1', '车道2', '车道3', '门架'],
top: 10, // 距离顶部的位置
textStyle: {
color: '#fff' // 字体颜色
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["省内", "省外", "其他"],
axisLabel: {
// interval: 0,
// rotate: 45, //避免X轴数据太长 倾斜度 -90 至 90 默认为0
// margin: 2,
textStyle: {
fontWeight: "bolder",
color: "#fff",
},
},
},
],
yAxis: [
{
type: 'value',
name: '车道/个',
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: { // 设置线的样式
type: 'dashed',
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontWeight: "bolder",
color: "#fff",
},
}
},
{
type: 'value',
name: '门架/个',
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontWeight: "bolder",
color: "#fff",
},
}
}
],
series: [
{
name: "车道1",
type: "bar",
barWidth: '20%', // 柱状图柱子的宽度
stack: "Ad", // stack值相同则堆叠
emphasis: {
focus: "series",
},
data: this.arrY1, // 数据源
itemStyle: {
color: '#287CE7' // 柱状图的颜色
},
},
{
name: "车道2",
type: "bar",
barWidth: '20%',
stack: "Ad",
emphasis: {
focus: "series",
},
data: this.arrY2,
itemStyle: {
color: '#30C6DC'
},
},
{
name: "车道3",
type: "bar",
barWidth: '20%',
stack: "Ad",
emphasis: {
focus: "series",
},
data: this.arrY3,
itemStyle: {
color: '#F4CF3D'
},
},
{
name: "门架",
type: "bar",
yAxisIndex: 1, // k开启双y轴
barWidth: '20%',
data: this.arrY4,
emphasis: {
focus: "series",
},
itemStyle: {
color: '#7B6DFE'
},
}
],
});
// 图标自适应
window.addEventListener("resize", function () {
myChart.resize();
});
},
getData() {
const obj = { }
// 获取数据
getData(obj).then(res => {
const { code, data } = res
if (code != '200') {
return
}
this.data= data
const arrY1 = []
const arrY2 = []
const arrY3 = []
const arrY4 = []
// 将数据对应放进去
this.arrY1 = arrY1
this.arrY2 = arrY2
this.arrY3 = arrY3
this.arrY4 = arrY4
this.getEcharts();
})
},
效果图
折线图的一些属性
// 折线面积渐变
series: [
{
name: "名字1",
type: "line",
// stack: "Total",
areaStyle: {},
data: this.arrY1,
symbol: "none", //这句就是去掉点的
smooth: true, //这句就是让曲线变平滑的
areaStyle: {
//区域填充渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(39,115,208,0.2)",
},
{
offset: 1,
color: "rgba(53,181,251,0)",
},
]),
},
},
{
name: "名字2",
type: "line",
// stack: "Total",
areaStyle: {},
data: this.arrY2,
symbol: "none", //这句就是去掉点的
smooth: true, //这句就是让曲线变平滑的
areaStyle: {
//区域填充渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(35,222,216,0.2)",
},
{
offset: 1,
color: "rgba(53,181,251,0)",
},
]),
},
},
{
name: "名字3",
type: "line",
// stack: "Total",
areaStyle: {},
data: this.arrY3,
symbol: "none", //这句就是去掉点的
smooth: true, //这句就是让曲线变平滑的
areaStyle: {
//区域填充渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255,230,60,0.2)",
},
{
offset: 1,
color: "rgba(53,181,251,0)",
},
]),
},
},
],
下一篇整理饼状图与环形图,3D柱状图
工作记录,有不足之处还请见谅,还望指出,感谢!