1. <template>
    2.     <div v-chartResize style="width: 100%; height:600px;" ref="main"></div>
    3. </template>
    5. <script setup>
    6. import { ref, shallowRef, onMounted, onUnmounted, nextTick } from 'vue' // vue 内置方法
    7. import * as echarts from 'echarts/core' // echarts 图表
    10. // 定义响应式数据
    11. const main = ref(null)
    12. const state = shallowRef({
    13.     myChart: null, // echarts 图表
    14. })
    17. // 组件挂载后，此方法执行后，页面显示
    18. onMounted(() => {
    19.     nextTick(() => {
    20.         initChart()
    21.     })
    22. })
    25. // 初始化 echarts
    26. const initChart = () => {
    27.     const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
    28.     state.myChart = echarts.init(main.value)
    29.     state.myChart.setOption({
    30.         title: { // 标题组件，包含主标题和副标题
    31.             text: '柱状图', // 主标题文本
    32.             textStyle: { // 主标题文字参数设置
    33.                 width: 500, // 文本显示宽度
    34.                 color: '#0095e1', // 主标题文字的颜色
    35.                 fontSize: 18, // 主标题文字的字体大小
    36.             },
    37.             subtext: '生活费用', // 副标题文本
    38.             subtextStyle: { // 副标题文字参数设置
    39.                 color: '#000', // 副标题文字的颜色
    40.             },
    41.             itemGap: 10, // 主副标题之间的间距
    42.             x: 'left', // 主副标题x轴对齐方式
    43.             y: 'top', // 主副标题y轴对齐方式
    44.         },
    45.         legend: {}, // 图例组件展现了不同系列的标记
    46.         tooltip: { // 鼠标滑入提示框
    47.             trigger: 'axis', // 触发类型
    48.             axisPointer: { // 坐标轴指示器配置项
    49.                 type: 'shadow' // 指示器类型
    50.             }
    51.         },
    52.         grid: { // 直角坐标系内绘图网格,类似padding
    53.             top: '15%',
    54.             left: '3%',
    55.             right: '4%',
    56.             bottom: '3%',
    57.             containLabel: true, // grid 区域是否包含坐标轴的刻度标签
    58.         },
    59.         xAxis: { // 直角坐标系 grid 中的 x 轴
    60.             type: 'category',
    61.             data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    62.         },
    63.         yAxis: [ // 直角坐标系 grid 中的 y 轴
    64.             {
    65.                 type: 'value', // 坐标轴类型
    66.                 name: '人民币', // 坐标轴名称
    67.                 position: 'left', // y 轴的位置
    68.                 alignTicks: true, // 在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度
    69.                 axisLine: { // 坐标轴轴线相关设置
    70.                     show: true,
    71.                     lineStyle: {
    72.                         color: colors[0]
    73.                     }
    74.                 },
    75.                 axisLabel: { // 坐标轴刻度标签的相关设置
    76.                     formatter: '{value} ￥'
    77.                 }
    78.             },
    79.             {
    80.                 type: 'value',
    81.                 name: '美元',
    82.                 position: 'right',
    83.                 alignTicks: true,
    84.                 axisLine: {
    85.                     show: true,
    86.                     lineStyle: {
    87.                         color: colors[0]
    88.                     }
    89.                 },
    90.                 axisLabel: {
    91.                     formatter: '{value} $'
    92.                 }
    93.             },
    94.         ],
    95.         series: [
    96.             {
    97.                 type: 'bar', // echarts 图表类型
    98.                 name: '美杜莎', // 系列名称，用于tooltip的显示
    99.                 color: '#0095e1', // 调色盘颜色列表
    100.                 data: [120, { // 定义单个柱子颜色
    101.                     value: 200,
    102.                     itemStyle: {
    103.                         color: '#F56C6C'
    104.                     }
    105.                 }, 150, 80, 70, 110, 130], // 系列中的数据内容数组。数组项通常为具体的数据项
    106.                 showBackground: true, // 是否显示柱条的背景色
    107.                 backgroundStyle: { // 柱条的背景颜色
    108.                     color: 'rgba(180, 180, 180, 0.2)'
    109.                 },
    110.             },
    111.             {
    112.                 type: 'bar', // echarts 图表类型
    113.                 name: '焰灵姬', // 系列名称，用于tooltip的显示
    114.                 data: [20, { // 定义单个柱子颜色
    115.                     value: 300,
    116.                     itemStyle: {
    117.                         color: '#F56C6C'
    118.                     }
    119.                 }, 40, 60, 170, 210, 230], // 系列中的数据内容数组。数组项通常为具体的数据项
    120.                 showBackground: true, // 是否显示柱条的背景色
    121.                 backgroundStyle: { // 柱条的背景颜色
    122.                     color: 'rgba(180, 180, 180, 0.2)'
    123.                 }
    124.             },
    125.             {
    126.                 type: 'line', // echarts 图表类型
    127.                 name: '云韵', // 系列名称，用于tooltip的显示
    128.                 data: [20, 100, 10, 180, 120, 200, 300], // 系列中的数据内容数组。数组项通常为具体的数据项
    129.                 showBackground: true, // 是否显示柱条的背景色
    130.                 backgroundStyle: { // 柱条的背景颜色
    131.                     color: 'rgba(180, 180, 180, 0.2)'
    132.                 },
    133.                 yAxisIndex: 1, // 对应 yAxis 下标为 1 的轴
    134.             }
    135.         ]
    136.     })
    137. }
    140. // 组件销毁完成后执行的函数
    141. onUnmounted(() => {
    142.     if (!state.myChart) {
    143.         return
    144.     }
    145.     state.myChart.dispose()
    146.     state.myChart = null
    147. })
    148. </script>
    150. <style lang='scss' scoped>
    151. </style>