vue3+ts 使用echarts 画圆柱状图

效果图如下：

 代码如下

<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元素即可👇

 

 

 出来的效果图就是最上面的 完美