Echarts官網(wǎng):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中生成，實際項目中會在通過接口獲取數(shù)據(jù)后生成圖表
this.chartLine = echarts.init(document.getElementById('chartLineBox'))
// 指定圖表的配置項和數(shù)據(jù)
var option = {
tooltip: {
// 設(shè)置tip提示
trigger: 'axis',
// 普通樣式帅容。
itemStyle: {
// 點的顏色棍矛。
color: '#7db0ff'
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#000000', // 更改坐標軸文字顏色
fontSize: 14 // 更改坐標軸文字大小
}
}
},
xAxis: {
// 設(shè)置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' // 改變區(qū)域顏色
}
},
itemStyle: {
normal: {
color: '#497cf8', // 改變折線點的顏色
lineStyle: {
color: '#7db0ff', // 改變折線顏色
width: 3// 設(shè)置線條粗細
}
}}
}
]
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
this.chartLine.setOption(option)
完整代碼
<template>
<!-- 內(nèi)容管理頁 -->
<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'))
// 指定圖表的配置項和數(shù)據(jù)
var option = {
tooltip: {
// 設(shè)置tip提示
trigger: 'axis',
// 普通樣式乳蛾。
itemStyle: {
// 點的顏色暗赶。
color: '#7db0ff'
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#000000', // 更改坐標軸文字顏色
fontSize: 14 // 更改坐標軸文字大小
}
}
},
xAxis: {
// 設(shè)置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' // 改變區(qū)域顏色
}
},
itemStyle: {
normal: {
color: '#497cf8', // 改變折線點的顏色
lineStyle: {
color: '#7db0ff', // 改變折線顏色
width: 3// 設(shè)置線條粗細
}
}}
}
]
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
this.chartLine.setOption(option)
},
methods: {
}
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－問題分界線－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
圖片.png
當ｘ軸數(shù)據(jù)過多肃叶，文字顯示不全
解決辦法：
原來寫法：
<div style="width:930px;min-height: 450px;" id="chartLineBox"></div>
grid: {
// 調(diào)整圖表上下左右位置
top: '10%',
left: '0%',
right: 0,
bottom: '10%',
containLabel: true
},
解決寫法：
<div style="width:960px;min-height: 450px;" id="chartLineBox"></div>
grid: {
// 調(diào)整圖表上下左右位置
top: '10%',
left: '0%',
right: 30,
bottom: '10%',
containLabel: true
},
我想要的是寬為930的圖表蹂随，但是發(fā)現(xiàn)實現(xiàn)不全，所以用960因惭，偏移30岳锁，最后效果還是930
