每日总结

今天进行了echart的学习

<template>
  <div ref="chartContainer" style="width: 400px; height: 300px;"></div>
</template>
<script>
import echarts from 'echarts';

export default {
  mounted() {
    // 创建echarts实例并获取DOM元素
    const chartContainer = this.$refs.chartContainer;
    const chart = echarts.init(chartContainer);

    // 配置柱状图数据和选项
    const data = [120, 200, 150, 80, 70, 110]; // 假设的柱状图数据
    const options = {
      title: {
        text: '柱状图示例', // 标题
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F'], // X轴标签
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: data, // 柱状图数据
      }],
    };

    // 在echarts实例中设置选项和数据，并显示图表
    chart.setOption(options);
  },
};
</script>

使用模板进行数据分析展示