首先安装echarts,这个就不介绍了,直接说怎么使用.
<!-- 创建一个div去显示echarts -->
<div ref="main" style="height: 300px"></div>
import {ref, provide, inject, onMounted, reactive} from "vue";
import * as echarts from "echarts";
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
() => {
init()
}
)
function init() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(main.value);
// 指定图表的配置项和数据
var option = {
/*title: {
text: 'ECharts 入门示例'
},*/
tooltip: {},
// color:['#779ffe','#a07dfe','#fc9b2e','#63f949','#fb6464','#fce481'],
/*grid: {
left: '30%',
right: '4%',
bottom: '3%',
containLabel: true
},*/
legend: {
// data: ['国家类型','非国家类型','个人','法人','可公式','非公式']
},
xAxis: {
type: 'category',
data: ['国家类型','非国家类型','个人','法人','可公式','非公式']
},
yAxis: {
type: 'value',
scale: true,
max: 150,
min: 0,
splitNumber: 3,
},
series: [
{
data: [
{
value: 120,
itemStyle: {
color: '#7fa6fe'
}
},
{
value: 90,
itemStyle: {
color: '#a17fff'
}
},
{
value: 40,
itemStyle: {
color: '#fda630'
}
},
{
value: 120,
itemStyle: {
color: '#93fc73'
}
},
{
value: 120,
itemStyle: {
color: '#fb6666'
}
},
{
value: 120,
itemStyle: {
color: '#fbe068'
}
}
],
type: 'bar'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
我们还有另外一种写法:
// 定义一个盒子
<div ref="main" style="height: 420px" />
<script setup>
// 接口
import { getCache } from '@/api/monitor/cache';
import * as echarts from 'echarts';
const cache = ref([]);
const main = ref(null);
function getList() {
proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
getCache().then(res =>{
proxy.$modal.closeLoading();
// 把请求的数据存起来(这个在有多个图表的情况下,可以这样使用)
cache.value = response.data;
/* 在使用echarts.init创建一个Echarts实例时,在第一个参数dom后再添加一个参数"theme",这
个参数是一个对象,里面可以设置你想要的主题 */
/* 你也可以不使用这个参数,直接使用echarts.init(dom)创建一个Echarts实例,这样就会使用默
认的主题 */
// 例子: const mains = echarts.init(main.value,"macarons");
// 你也可以不设置主题,会有默认的
const myChart = echarts.init(main.value);
myChart.setOption({
// 这里就是option的配置了
tooltip: {},
color:['rgba(91,143,249,0.85)'],
grid: {
// left: '30%',
// right: '4%',
top: '5%',
bottom: '3%',
containLabel: true
},
legend: {
// data: ['国家类型','非国家类型','个人','法人','可公式','非公式']
},
xAxis: {
type: 'category',
data: ['国家类型','非国家类型','个人','法人','可公式','非公式'],
axisLine:{
lineStyle:{
color: '#7e7b7b' // x轴颜色
}
},
axisTick: { show: false } // x轴坐标刻度样式（显示或者隐藏）
},
yAxis: {
// 设置固定y轴刻度
/*type: 'value',
scale: true,
max: 1000,
min: 0,
splitNumber: 6*/
},
series: [
{
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: 'black',
fontSize: 12,
},
},
},
},
barWidth: 30, // 柱子宽度
data: [382,294],
// data: res.data.数据等等
type: 'bar'
}
]
})
})
}
getList()
</script>
上面代码中为什么使用ref获取图表:
源码中 ref 的实际获取方式也是通过原生的 getElementById 而得到Dom节点;【可以说ref是document.getElementById的语法糖. vue3的ref延续了vue2的用法,还增加了一个作用就是创建响应式数据】.
经过数据表明, $ref 相对于 document.getElementById 的方法, 会减少获取Dom节点的消耗;
使用:
//普通Dom
<div class="user" ref="user"></div>
//组件
<batch-adjust-department-modal ref="batchAdjustDepartmentRef" />
<script setup>
import { ref } from 'vue';
// modal调整部门弹层Dom
const batchAdjustDepartmentRef = ref(null);
const user = ref(null);
</script>
关于Echarts的自适应我这里推荐一个插件可以完美解决Echarts的自适应问题:
命令:
npm install element-resize-detector
核心代码:
const erd = elementResizeDetectorMaker();
erd.listenTo(main.value, function(element) {
myChart.resize();
});
完整代码:
// 定义一个盒子
<div ref="main" style="height: 420px" />
<script setup>
// 接口
import { getCache } from '@/api/monitor/cache';
import * as echarts from 'echarts';
const cache = ref([]);
const main = ref(null);
function getList() {
proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
getCache().then(res =>{
proxy.$modal.closeLoading();
// 把请求的数据存起来(这个在有多个图表的情况下,可以这样使用)
cache.value = response.data;
/* 在使用echarts.init创建一个Echarts实例时,在第一个参数dom后再添加一个参数"theme",这
个参数是一个对象,里面可以设置你想要的主题 */
/* 你也可以不使用这个参数,直接使用echarts.init(dom)创建一个Echarts实例,这样就会使用默
认的主题 */
// 例子: const mains = echarts.init(main.value,"macarons");
// 你也可以不设置主题,会有默认的
const myChart = echarts.init(main.value);
myChart.setOption({
// 这里就是option的配置了
tooltip: {},
color:['rgba(91,143,249,0.85)'],
grid: {
// left: '30%',
// right: '4%',
top: '5%',
bottom: '3%',
containLabel: true
},
legend: {
// data: ['国家类型','非国家类型','个人','法人','可公式','非公式']
},
xAxis: {
type: 'category',
data: ['国家类型','非国家类型','个人','法人','可公式','非公式'],
axisLine:{
lineStyle:{
color: '#7e7b7b' // x轴颜色
}
},
axisTick: { show: false } // x轴坐标刻度样式（显示或者隐藏）
},
yAxis: {
// 设置固定y轴刻度
/*type: 'value',
scale: true,
max: 1000,
min: 0,
splitNumber: 6*/
},
series: [
{
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: 'black',
fontSize: 12,
},
},
},
},
barWidth: 30, // 柱子宽度
data: [382,294],
// data: res.data.数据等等
type: 'bar'
}
]
})
const erd = elementResizeDetectorMaker();
erd.listenTo(main.value, function(element) {
myChart.resize();
});
})
}
getList()
</script>
效果:
