vue3加ts写echarts大屏时如何修改对应图表的形状以及颜色

这是原本的效果

这是我们修改完之后的效果

代码如下

<template>
  <div ref="axis" style="height: 800px;">
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onMounted } from 'vue';
// Echarts 为init（dom元素后的类型）
import { inject } from 'vue';
const axis = ref(null)
const echarts = inject("echarts") as any;
let echartsValue = null as any; //初始化echarts实例对象
// 图表legend的svg图形
const legendSvg = {
  // 正方形 10*10
  rect: 'path://M-0.000,-0.000 L10.000,-0.000 L10.000,10.000 L-0.000,10.000 L-0.000,-0.000 Z',
  // 线条 10*3
  line: 'path://M-0.000,-0.000 L10.000,-0.000 L10.000,3.000 L-0.000,3.000 L-0.000,-0.000 Z'
}
const render = () => {
  echartsValue = echarts.init(axis.value, 'dark');
  const option = {
    title: {
      text: '111',
      left: '150px',
      top: '20px'
    },
    legend: {
      top: "10%",
      right: "5%",
      show: true,
      data: [{
        name: '测试01',
        icon: legendSvg.rect
      }, {
        name: '测试02',
        icon: legendSvg.line
      }],
      orient: 'vertical',
      y: 'center',     //可设定图例在上、下、居中
      itemWidth: 8,
      itemHeight: 8,
      itemStyle: {
        color: '#01bcee'
      },
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    grid: {
      show: true,
      // 配置图标所在的位置(top  bottom   left  right) -->调整图形的大小
      left: "3%",
      right: "3%",
      bottom: "5%",
      containLabel: true, //包含图标x和y轴的内容
    },
    tooltip: {
      show: true,
      trigger: "axis", //提示语的样式
      axisPointer: {
        //配置指示器
        type: "shadow", // line shadow cross
      },
    },
    series: [
      {
        name: '测试01',
        data: ['1008', '1007', '1003', '1004', '1001', '1005'],
        type: 'bar',
        barWidth: 50,
        label: {
          show: true,
          position: 'right'
        },
        itemStyle: {
          color: function (params: any) {
            // 给出颜色数组
            var colorList = ['#cca272', '#74608f', '#d7a02b', '#c8ba23', "#181818", "#ffc11a", "#337eef"];
            return colorList[params.dataIndex]
          },
        }
      },
      {
        name: '测试02',
        data: [75, 125, 112, 109, 100, 120, 130],
        type: 'line',
        label: {
          show: true
        },
        legendHoverLink: true
      }
    ]
  };
  echartsValue.setOption(option);
  echartsValue.resize();
}
window.addEventListener('resize', function () {
  echartsValue && echartsValue.resize();
})
onMounted(() => {
  render();
});
</script>
<style lang='scss' scoped>

</style>