安装echarts依赖
npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
全局引入
在main.js中
import * as echarts from 'echarts'
Vue代码
<template>
<div ref="chart" style="width: 100%; height: 500px"></div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";
export default {
setup() {
const state = reactive({
//创建响应式数据对象和相关数据
id: 1,
chart: ref(),
data1: ref([10]),
data2: ref([10, 10]),
});
const init = () => {
//定义方法
if (state.chart) {
//图标初始化
var myChart = echarts.init(state.chart);
const option1 = {
title: {
text: "当日撮合交易总量情况",
},
xAxis: {
type: "category",
data: ["撮合交易总量", "最高成交价", "最低成交价", "平均交易价格"],
},
yAxis: {
type: "value",
},
series: [
{
data: [120, 200, 150, 80],
type: "bar",
},
],
};
//指定配置项与数据显示
myChart.setOption(option1);
}
};
onMounted(() => {
getReportData();
init();
});
const reportData = ref({});
const getReportData = () => {
get("/user/user-count").then((res) => {
reportData.value = res.data;
state.data2 = [reportData.value.manNum, reportData.value.womanNum];
console.log(state.data1);
state.data1 = [
reportData.value.ageOne,
reportData.value.ageTwo,
reportData.value.ageThree,
reportData.value.ageFour,
reportData.value.ageFive,
];
init();
});
};
return state;
},
};
</script>
<style>
.contains {
padding: 10px;
}
</style>
结果
注: 代码可根据Examples - Apache ECharts 官网代码自行对照修改实现其他图