1. 在main.ts中引入
import * as echarts from 'echarts'
const app = createApp(App);
app.config.globalProperties.$echarts = echarts
2.vue界面代码
<template>
<main>
<Back />
<el-row justify="center" style="background:none;">
<el-col>
<h3>echarts测试</h3>
</el-col>
</el-row>
<div id='showEcharts' style='width:400px; height:400px'></div>
</main>
</template>
<script lang="ts">
import { ref, onMounted, defineComponent } from "vue";
import * as echarts from 'echarts';
onMounted(
() => {
init()
}
)
export default defineComponent({
title: "echarts测试",
// name:
path: '/doctor/echarts',
data() {
return {
name: ['一', '二', '三', '四', '五', '六', '七'],
val: [150, 230, 224, 218, 135, 147, 260],
}
},
methods: {
showorders() {
// 基于准备好的dom,初始化echarts实例
var chartDom = document.getElementById('showEcharts');
var myChart = echarts.init(chartDom);
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// # x轴
xAxis: {
type: 'category',
data: this.name
},
axisTick: {
alignWithLabel: true
},
// # y 轴
yAxis: {
type: 'value'
},
// # 类型
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: this.val
}
]
})
// 指定图表的配置项和数据
// var option;
// option = {
// // # x轴
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// // # y 轴
// yAxis: {
// type: 'value'
// },
// // # 类型
// series: [
// {
// data:[150, 230, 224, 218, 135, 147, 260],
// type: 'bar'
// }
// ]
// };
// option && myChart.setOption(option);
},
},
mounted() {
this.showorders()
},
})
</script>
<style>
</style>
这是个简单的柱状图。 defineComponent可以删除,并不影响功能。