Echarts 显示排名

Echarts 显示排名

版本vue3 + Echarts5.4.0

1.在页面中引入echarts

import * as echarts from 'echarts';

2.绘制图表

const chartsinit = () => {var myChart = echarts.init(<any>document.querySelector('#e4'));// 绘制图表myChart.setOption({tooltip: {trigger: 'axis'},xAxis: {show:false,type: 'value',},grid:{left:'25%',top:'8%',bottom:"18%"},yAxis: {type: 'category', // 横向需要把yAxis的type设置为categoryinverse: true, // 反转axisLine: {show: false // 底部横线},axisTick:{show:false // 底部刻度线},axisLabel:{color:"#fff",formatter: (params:any, index:number) => {if(index>2) return [`${params}`] // 只设置前三名return [`{a${index + 1}|No.${index+1}}    ${params}`].join('n')},rich: {a1: {color:"#FFC300",width: 20, // 序号元素宽height: 20, // 序号元素高fontSize:14},a2: {color:"#FF8F1F",width: 20, // 序号元素宽height: 20, // 序号元素高fontSize:14},a3: {color:"#EE1212",width: 20, // 序号元素宽height: 20, // 序号元素高fontSize:14},},},data:['A','B','C','D','E'],},series: [{name: '订单',type: 'bar',stack: 'Total',data: [800,700,600,500,400],barWidth:'40%',label: {show: true,position: 'right',valueAnimation: true,formatter:'{c}',       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。color:"#fff",               //文字颜色fontStyle:"normal",         //italic斜体  oblique倾斜fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | fontSize:12,                  //字体大小},}]});window.addEventListener("resize", () => {size()});
}

3.使用函数chartsinit

在<script lang="ts" setup>中直接在setup中使用会报错，在setup中直接使用相当于vue2的create函数，会找不到"#e4"这个dom，这时需要引入vue3的生命周期钩子"onMounted"

import {onMounted} from "vue"
onMounted(() => {chartsinit()
})