效果图如下：
?代码如下
<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from 'vue';
import * as echarts from 'echarts';
// 获取echarts的dom元素
let chartRef = ref();
// 定义收益柱状图数据
let profit = reactive({
title: {
text: '总收益：236.15 人数：32订阅',
textStyle: {
fontSize: 12,
color: '#222222',
fontFamily: 'Source Han Sans CN, Source Han Sans CN-Medium',
},
subtext: '收益统计',
subtextStyle: {
color: '#222222',
fontFamily: 'Source Han Sans CN, Source Han Sans CN-Normal',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Now', 'Dec'],
axisTick: {
// 关掉x轴中间的分割线
show: false,
},
axisLine: {
lineStyle: {
//x轴线的颜色
width: 0,
color: '#999999',
},
},
axisLabel: {
// x轴上的文字颜色
textStyle: {
color: '#999999',
},
},
},
],
yAxis: [
{
type: 'value',
// y轴轴刻度最大值
max: 30,
//自动计算的坐标轴最小间隔大小
minInterval: 6,
// 强制设置坐标轴分割间隔
interval: 5,
axisLabel: {
// y轴字体颜色
color: '#999999',
},
},
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '45%',
// 柱形图的颜色和外观设置
itemStyle: {
color: '#D5E0FF',
borderRadius: 50,
},
// 高亮的图形样式和标签样式。
emphasis: {
itemStyle: {
color: '#007DFF', // 选中柱颜色
},
},
data: [30, 26, 24, 23, 21, 19, 19, 18, 16, 13, 14, 12],
},
],
});
onMounted(() => {
let profitCharts = echarts.init(chartRef.value);
profitCharts.setOption(profit);
});
</script>
如果用id去获取dom元素然后引入echarts配置时，会提示↓?
Returns a reference to the first object with the specified value of the ID attribute.
@param?elementId?— String that specifies the ID value.
类型“HTMLElement | null”的参数不能赋给类型“HTMLElement”的参数。
不能将类型“null”分配给类型“HTMLElement”。ts(2345)
?此时可以用ts的断言↓
echarts.init(document.getElementById('trightBox') as HTMLCanvasElement);
但本人觉得没必要，直接用ref来获取dom元素即可👇
?
?
?出来的效果图就是最上面的 完美
