vue3.0 安装使用echarts
vue3.0安装使用echarts 5
1、安装 , 控制台输入, 默认echarts 5版本
npm i echarts -S 或
npm install echarts --save
2、项目中使用echarts
引入:
import * as echarts from 'echarts'
(1)初始化:
var myChart = echarts.init(document.querySelector('#main')) // #main是放置图表的容器,可自定义,设置容器时一定要设置宽高,不设置会导致图表不显示走入误区。
(2)定义option,根据自己需求定义,可在echarts官方网站
Apache EChartshttps://echarts.apache.org/zh/index.html 上查找自己需要的实例
var option= {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 200, 210, 218, 135, 147, 245],
type: 'line'
}
]
}
(3)设置数据
myChart.setOption(option)
即可看到自己设置的图表
实例:
<template>
<div id="main" style="width: 500px;height: 500px">
</div>
</template>
<script>
import {defineComponent, reactive, onMounted} from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
setup () {
const state = reactive({
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'
}
]
}
})
onMounted (() => {
const myChart = echarts.init(document.querySelector('#main'))
myChart.setOption(state.option)
})
return {
state
}
}
})
</script>
更多推荐
所有评论(0)