112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<!--vue3中 id=‘’ 变更 ref=-->
|
||
<div ref="chart" style="width:100%;height:200px;"></div>
|
||
</template>
|
||
|
||
<script setup >
|
||
import {onMounted, reactive, ref} from "vue";
|
||
// 局部引入echarts核心模块
|
||
import * as echarts from 'echarts'
|
||
|
||
// const props = defineProps({ // 宏接收：父传参
|
||
// 结构优化
|
||
const {chartType,chartData}= defineProps({ // 宏接收：父传参
|
||
chartType:{
|
||
type: String
|
||
},
|
||
chartData: {
|
||
type: Array
|
||
}
|
||
})
|
||
|
||
const chart =ref(); // 创建DOM引用
|
||
|
||
// 第二种方法：初始化方法
|
||
const option = reactive({
|
||
// 指定图表的配置项和数据
|
||
title: { // 标题
|
||
// left: 'center', // 居中
|
||
text: 'ECharts 入门示例',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#f60',
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
color: '#f00', // 系列柱的颜色
|
||
tooltip: {}, // 提示
|
||
legend: { // 图例
|
||
data: ['销量'],
|
||
top: '5%',
|
||
left: 'right',
|
||
textStyle: { // 文字样式
|
||
color: '#f68',
|
||
}
|
||
},
|
||
xAxis: { // x轴
|
||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||
axisLine: { // 设置轴
|
||
lineStyle: { // 样式
|
||
color:'#000' // 颜色
|
||
}
|
||
},
|
||
|
||
axisLabel:{
|
||
interval: 0,
|
||
formatter: value => value.split('').join('\n') //报红：取消lang='ts'
|
||
}
|
||
},
|
||
yAxis: { // y轴
|
||
axisLine: { // 设置轴
|
||
lineStyle: { // 样式
|
||
color:'#000' // 颜色
|
||
}
|
||
},
|
||
axisLabel:{
|
||
// formatter: '{value} 件'
|
||
formatter: function(value,index){ // 报红：取消lang='ts'
|
||
return value %2 == 0 ? value + '件' : value // 可写各种逻辑判断： 奇偶数
|
||
}
|
||
}
|
||
},
|
||
series: [ // data数据
|
||
{
|
||
name: '销量',
|
||
// type: 'bar', // 图样类型
|
||
// type: props.chartType, // 父传参：自定义
|
||
type:chartType, // 结构优化
|
||
// data: [5, 20, 36, 10, 10, 20], // 图标数据
|
||
// data: props.chartData,
|
||
data: chartData,
|
||
label: {
|
||
show: true,
|
||
position: 'top'
|
||
},
|
||
}
|
||
]
|
||
})
|
||
|
||
// 使用生命钩子
|
||
onMounted(() => {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
// var myChart = echarts.init(document.getElementById('main'));
|
||
// Vue3中： 需要引入
|
||
var myChart = echarts.init(chart.value)
|
||
|
||
// init(); // vue3.2没有this
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
// 单图表响应式: 跟随浏览器大小改变
|
||
window.addEventListener('resize',()=>{
|
||
myChart.resize()
|
||
})
|
||
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style> |