第一章使用、echarts
<template>
<button @click="updateDate">更换数据</button>
<div class='home' ref="home">
home
</div>
</template>
name:'home'
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, reactive } from 'vue'
let mycart = null
let home = ref(null)
let myDate = reactive([
{ id: '1', name: '鞋子', xl: 22, kc: 77 },
{ id: '2', name: '绵衣', xl: 33, kc: 33 },
{ id: '3', name: '高跟鞋', xl: 44, kc: 44 },
{ id: '4', name: '袜子', xl: 66, kc: 56 },
{ id: '5', name: '牛仔裤', xl: 99, kc: 89 }
])
let updateDate = () => {
// 注意:setOptions 可以重复调用，前面数据可以覆盖后面的数据
mycart.setOption({
xAxis: {
data: myDate.map(r => r.name)
},
// 系列分类
series: [
{
// 系类名称
name: '销量',
// 类型
type: 'bar',
// 系列数据
data: myDate.map(r => r.xl)
},
{
name: '库存',
type: 'bar',
data: myDate.map(r => r.kc)
}
]
})
}
// 绘制图表方法
const initEcharts = () => {
mycart = echarts.init(home.value)
mycart.setOption({
// 标题配置
title: {
// 主标题文本
text: '商品销量排名',
// 主标题的超链接
link: 'https://baidu.com',
// 指定主标题的打开窗口方式
target: 'blank',
// 主标题文本样式
textStyle: {
color: 'red'
},
// 副标题文本
subtext: '2022年最新数据',
// 副标题文本样式
subtextStyle: {
color: 'green'
},
// 边框样式
borderWidth: 1,
borderColor: '#369',
padding: [5, 10],
borderRadius: 5,
// 指控标题的位置
right: '40%',
top: '5%'
},
// 鼠标放到图标上显示数据的提示框
tooltip: {
show: true,
// 触发类型 item 表示在指定的项中触发
trigger: 'axis',
// 触发事件的方式
triggerOn: 'click',
// 自定义提示框
formatter: (r) => {
const total = r.map(r => r.value).reduce((r, s) => r + s, 0)
return `
<div>
<h4>${r[0].axisValue}</h4>
<div>${r[0].marker}
<span>${r[0].seriesName}:${r[0].value}</span>
</div>
<div>${r[1].marker}
<span>${r[1].seriesName}:${r[1].value}</span>
</div>
<div>
${r[0].marker}
<span>总计：${total}</span>
</div>
</div>
`
}
},
// x坐标系
xAxis: {
// 坐标轴类型 默认是 category
type: 'category',
// 坐标轴数据
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
// y轴坐标系
yAxis: {
// 数值轴
type: 'value'
// 数值轴的数据来源于系列的数据
},
// 系列分类
series: [
{
// 系类名称
name: '销量',
// 类型
type: 'bar',
// 系列数据
data: [5, 20, 36, 40, 10, 20]
},
{
name: '库存',
type: 'bar',
data: [4, 22, 40, 18, 23, 30]
}
],
// 图标绘制区域
grid: {
show: true,
borderWidth: 1,
borderColor: 'red',
// 控制图标在容器中的位置
left: '10%',
right: '10%',
top: '20%',
bottom: '5%',
// 计算方位是否包含lable 默认是false
containLabel: true,
// 设置阴影
showCursor: 'red',
shadowBlur: 10
},
// 图例组件
legend: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
// 图列的布局
left: '1%',
top: '50%',
// 图列的布局方向
orient: 'vertical',
icon: 'triangle'
},
// 工具栏
toolbox: {
// 各个工具配置项
feature: {
// 保存为图片
saveAsImage: {},
// 动态切换类型
magicType: {
// 这里设置的是折线图，柱状图，堆叠图
type: ['line', 'bar', 'stack']
},
// 数据区域缩放
dataZoom: {},
// 数据视图工具
dataView: {}
}
}
})
}
onMounted(() => {
initEcharts()
// 注册窗口大小改变事件
window.addEventListener('resize', () => {
// 监听到窗口大小在发生改变时echarts也跟着发生改变自适应
mycart.resize()
})
})
</script>
<style scoped lang='scss'>
.home {
width: 95%;
height: 600px;
border: 1px solid #ccc;
}
</style>