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>
|