(1)引入echarts组件库
import * as echarts from 'echarts'
(2)在setup()中定义绘制的内容
1、定义绘制函数drawchart()
2、通过document.getElementById('flod-operator')获取到'flod-operator'的DOM节点,此时获取到的是一整个DOM树。
setup(){
const drawchart = () =>{
let myChart = echarts.init(document.getElementById('flod-operator'));
// 绘制图表
myChart.setOption({
xAxis: {
data: [1,2,3,4,5,6,7,8,9,10],
axisTick: {
show: false, //不显示坐标轴刻度线
},
axisLine: {
show: false, //不显示坐标轴线
},
type: "category",
},
yAxis:{
type: 'value',
max:1,
min:0,
// splitNumber: 5,
axisLabel: { //坐标文字
color: '#151515',
formatter: function (value) {
return `${value}C`;
}
},
axisTick: {
show: false, //不显示坐标轴刻度线
},
axisLine: {
show: false, //不显示坐标轴线
},
splitLine: {
lineStyle: { //y轴分隔线样式设置
color: '#E2E5ED', //颜色
type: '', //虚线
opacity: 1,
}
}
},
grid: {
top:'10%',
left: '3%', //默认10%
right: '4%', //默认10%
bottom: '8%', //默认60
containLabel: true
//grid区域是否包含坐标轴的刻度标签
},
series: [
{
name: "用户量",
type: "line",
data: [1,2,3,4,5,6,7,8,9,10],
symbolSize: 0
}
]
})
}
}
(3)vue3对echarts复用时会出现,只绘制了一张折线图的问题,该问题的出现是因为没有对dom的id进行分别。只需对dom上组件进行id的动态配置即可解决。