Echarts官网:https://echarts.apache.org/examples/zh/index.html
需求效果图：
图片.png
本人使用的是cdn引入：
1.在index.html 引入cdn地址
cdn
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.js"></script>
图片.png
图片.png
2.在配置文件中externals配置
图片.png
3.在页面中使用
3.1定义具备高宽的 DOM 容器。
<div style="width:1100px;min-height: 500px;left:-65px" id="chartLineBox">
3.2 引入
import * as echarts from 'echarts'
3.3 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的折线图
注意：这里只是在mounted中生成，实际项目中会在通过接口获取数据后生成图表
this.chartLine = echarts.init(document.getElementById('chartLineBox'))
// 指定图表的配置项和数据
var option = {
tooltip: {
// 设置tip提示
trigger: 'axis',
// 普通样式。
itemStyle: {
// 点的颜色。
color: '#7db0ff'
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#000000', // 更改坐标轴文字颜色
fontSize: 14 // 更改坐标轴文字大小
}
}
},
xAxis: {
// 设置x轴
type: 'category',
data: [
'2021-2-16',
'2021-2-21',
'2021-2-26',
'2021-3-3',
'2021-3-8',
'2021-3-14',
'2021-3-19'
],
axisLabel: {
show: true,
textStyle: {
color: '#000000', // 更改坐标轴文字颜色
fontSize: 14 // 更改坐标轴文字大小
}
}
},
series: [
{
data: [120, 932, 901, 24, 1290, 30, 1320],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: '#f8fdff' // 改变区域颜色
}
},
itemStyle: {
normal: {
color: '#497cf8', // 改变折线点的颜色
lineStyle: {
color: '#7db0ff', // 改变折线颜色
width: 3// 设置线条粗细
}
}}
}
]
}
// 使用刚指定的配置项和数据显示图表。
this.chartLine.setOption(option)
完整代码
<template>
<!-- 内容管理页 -->
<div class="creativeCenterPage">
<div style="width:1100px;min-height: 500px;left:-65px" id="chartLineBox"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'CreativeCenter',
data () {
return {}
},
created () {},
mounted () {
this.chartLine = echarts.init(document.getElementById('chartLineBox'))
// 指定图表的配置项和数据
var option = {
tooltip: {
// 设置tip提示
trigger: 'axis',
// 普通样式。
itemStyle: {
// 点的颜色。
color: '#7db0ff'
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#000000', // 更改坐标轴文字颜色
fontSize: 14 // 更改坐标轴文字大小
}
}
},
xAxis: {
// 设置x轴
type: 'category',
data: [
'2021-2-16',
'2021-2-21',
'2021-2-26',
'2021-3-3',
'2021-3-8',
'2021-3-14',
'2021-3-19'
],
axisLabel: {
show: true,
textStyle: {
color: '#000000', // 更改坐标轴文字颜色
fontSize: 14 // 更改坐标轴文字大小
}
}
},
series: [
{
data: [120, 932, 901, 24, 1290, 30, 1320],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: '#f8fdff' // 改变区域颜色
}
},
itemStyle: {
normal: {
color: '#497cf8', // 改变折线点的颜色
lineStyle: {
color: '#7db0ff', // 改变折线颜色
width: 3// 设置线条粗细
}
}}
}
]
}
// 使用刚指定的配置项和数据显示图表。
this.chartLine.setOption(option)
},
methods: {
}
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－问题分界线－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
图片.png
当ｘ轴数据过多，文字显示不全
解决办法：
原来写法：
<div style="width:930px;min-height: 450px;" id="chartLineBox"></div>
grid: {
// 调整图表上下左右位置
top: '10%',
left: '0%',
right: 0,
bottom: '10%',
containLabel: true
},
解决写法：
<div style="width:960px;min-height: 450px;" id="chartLineBox"></div>
grid: {
// 调整图表上下左右位置
top: '10%',
left: '0%',
right: 30,
bottom: '10%',
containLabel: true
},
我想要的是宽为930的图表，但是发现实现不全，所以用960，偏移30，最后效果还是930
