npm安装Echarts
npm install echarts --save
在所需的组件中引入Echarts
import * as echarts from 'echarts'
准备好dom,初始化echarts实例并绘制图表
const myChart = echarts.init(document.getElementById('main'));
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
示例
<template>
<div ref="main" style="width: 400px; height: 400px"></div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const main= ref()
onMounted(() => {
initEcgarts()
})
const initEcgarts = () => {
const massEchart = echarts.init(mass.value)
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
massEchart.setOption(option)
}
</script>
vue3获取dom元素可以原生也可以ref获取单个元素,获取方法如上,变量名要和ref值相同
尽量使用div当做dom容器,不要使用一些组件ui避免出现一些隐藏的bug,另外使用init()方法实例化图表的时候,dom容器一定要指定宽和高
图表大小调整
饼状图的大小修改series中的radius即可
series:[
radius:50%
]
柱状图和折线图修改grid中的属性值就行
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。