npm install echarts

import * as echarts from 'echarts';

<template>
  <div id="chartContainer"></div>
</template>

import { ref, onMounted } from 'vue';

export default {
  name: 'ChartComponent',
  setup() {
    const chartContainer = ref(null); // 用于引用容器元素

    onMounted(() => {
      const chart = echarts.init(chartContainer.value); // 初始化echarts圖表
      // 在這里配置和更新echarts圖表的數(shù)據(jù)、樣式等
    });

    return {
      chartContainer,
    };
  },
};

chart.setOption({
  // 配置項(xiàng)
});

import { onUnmounted } from 'vue';

export default {
  name: 'ChartComponent',
  setup() {
    // ...

    onUnmounted(() => {
      chart.dispose(); // 銷毀echarts圖表對(duì)象
    });

    // ...
  },
};

<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

onMounted(() => {
  chartInstance = echarts.init(chartRef.value)

  // 模擬數(shù)據(jù)
  const data = [
    { name: 'A', value: 100 },
    { name: 'B', value: 200 },
    { name: 'C', value: 150 },
    { name: 'D', value: 300 },
    { name: 'E', value: 88 },
    { name: 'F', value: 98 },
    { name: 'G', value: 123 },
    { name: 'H', value: 219 }
  ]

  // 配置項(xiàng)
  const options = {
    xAxis: {
      type: 'category',
      data: data.map((item) => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.map((item) => item.value),
        type: 'line'
      }
    ]
  }

  // 設(shè)置圖表配置項(xiàng)
  chartInstance.setOption(options)
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style scoped>
.chart-container {
  width: 400px;
  height: 300px;
}
</style>

xAxis: {
      type: 'category',
      data: data.map((item) => item.name),
     axisTick: {
          show: false, // 不顯示刻度
     },
      // axisLabel: {
      //   show: false // 不顯示刻度標(biāo)簽,一般都是要顯示的
      // }
},

xAxis: {
      type: 'category',
      data: data.map((item) => item.name),
      axisTick: {
          show: false, // 不顯示刻度
     },
      // axisLabel: {
      //   show: false // 不顯示刻度標(biāo)簽,一般都是要顯示的
      // }
       axisLabel: {
        interval: 1 // 每隔一個(gè)位置顯示數(shù)值
      },
},

 series: [
      {
        data: data.map((item) => item.value),
        type: 'line',
        symbol: 'circle', // 設(shè)置為圓形
        symbolSize: 8, // 設(shè)置圓形的大小
         color: '#ff0000',//顏色
        itemStyle: {
          color: '#ff0000', // 設(shè)置圓形的填充顏色
          borderColor: '#ff0000', // 設(shè)置圓形的邊框顏色
        },
      }
    ]

const options = {
 
  tooltip: {
    trigger: 'item', // 觸發(fā)類型為item，表示在圓點(diǎn)上觸發(fā)顯示
    formatter: ': {c}', // 顯示的格式，表示類目值，{c}表示數(shù)值
  },
 
};

const options = {
   //省略
  series: [
      {
        data: data.map((item) => item.value),
        type: 'line',
        symbol: 'circle', // 設(shè)置為圓形
        symbolSize: 8, // 設(shè)置圓形的大小
        color: '#ff0000', //顏色
        emphasis: {
          // 設(shè)置選中狀態(tài)下的樣式
          itemStyle: {
            borderWidth: 6, // 邊框?qū)挾?
            borderColor: '#ff0000', // 邊框顏色
            shadowBlur: 10, // 陰影模糊度
            shadowColor: 'rgba(0, 0, 0, 0.3)' // 陰影顏色
          }
        }
      }
    ]
};

     const options = {
    xAxis: {
      type: 'category',
      data: data.map((item) => item.name),
      axisTick: {
        show: false // 不顯示刻度
      },
      // axisLabel: {
      //   show: false // 不顯示刻度標(biāo)簽,一般都是要顯示的
      // }
      axisLabel: {
        interval: 1, // 每隔一個(gè)位置顯示數(shù)值
        formatter: '{value} (刻)'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: function (value) {
          return value + ' 個(gè)'
        }
      }
    },
    tooltip: {
      trigger: 'item', // 觸發(fā)類型為item，表示在圓點(diǎn)上觸發(fā)顯示
      formatter: ': {c}' // 顯示的格式，表示類目值，{c}表示數(shù)值
    },
    series: [
      {
        data: data.map((item) => item.value),
        type: 'line',
        symbol: 'circle', // 設(shè)置為圓形
        symbolSize: 8, // 設(shè)置圓形的大小
        color: '#ff0000', //顏色
        emphasis: {
          // 設(shè)置選中狀態(tài)下的樣式
          itemStyle: {
            borderWidth: 6, // 邊框?qū)挾?
            borderColor: '#ff0000', // 邊框顏色
            shadowBlur: 10, // 陰影模糊度
            shadowColor: 'rgba(0, 0, 0, 0.3)' // 陰影顏色
          }
        }
      }
    ]
  }

 yAxis: {
      name: '(次)',
      type: 'value'
    },

series: [
      {
        //省略
        smooth: true,
      //省略
      }
    ]

const options = {
 
  dataZoom: [
    {
      type: 'inside', // 內(nèi)置縮放組件
      start: 0, // 默認(rèn)縮放起始位置
      end: 100, // 默認(rèn)縮放結(jié)束位置
    },
    {
      type: 'slider', // 滑動(dòng)條縮放組件
      start: 0, // 默認(rèn)縮放起始位置
      end: 100, // 默認(rèn)縮放結(jié)束位置
    },
  ],
};