基于Vue实现Echarts的平滑曲线

在Vue2.x的项目中使用echarts实现如下效果

安装echarts

npm install echarts --save

组件引入echarts

// 在你的Vue组件中
import * as echarts from 'echarts';

在模板中添加一个div元素，用来放置图表

 <div
	ref="chart"
	class="chart"
	style="width: 100%; height: 200px; color: white; margin-left: -10px; margin-top: -20px"
	></div>

对echarts图标进行设置

import { ref, onMounted } from 'vue';

const chart = ref();

onMounted(() => {
  // 初始化 ECharts 实例
  const myChart = echarts.init(chart.value);

  // 配置项
  const option = {
    title: {
      text: '单位：分钟', // 主标题（单位）
      left: '5%', // 靠左对齐
      top: '15%', // 靠顶部对齐
      textStyle: {
        fontSize: 6, // 字体大小
        color: '#fff', // 字体颜色
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['3月7日', '3月8日', '3月9日', '3月10日', '3月11日', '3月12日', '3月13日'],
      axisLabel: {
        color: '#ffffff',
        fontSize: 5,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#022241', // X 轴轴线颜色
          width: 0.8,
        },
      },
    },
    yAxis: {
      type: 'value',
      min: 0, // 最小值
      max: 6, // 最大值
      interval: 2, // 刻度间隔
      axisLabel: {
        // 设置Y轴文字颜色
        color: '#ffffff',
        fontSize: 5,
      },
      splitLine: {
        show: false, // 隐藏 Y 轴的网格线
      },
    },
    series: [
      {
        data: [2, 3, 4, 3, 2, 5, 2],
        type: 'line',
        smooth: true, // 开启平滑曲线
        label: {
          show: false,
        },
        areaStyle: {
          color: 'rgba(34, 92, 214, 0.3)', // 设置填充区域的颜色（半透明蓝色）
        },
      },
    ],
  };

  // 设置配置项
  myChart.setOption(option);

  // 监听窗口大小变化，动态调整图表大小
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});

设置单位

设置单位的文字，字体颜色大小等

    title: {
      text: '单位：分钟', // 主标题（单位）
      left: '5%', // 靠左对齐
      top: '15%', // 靠顶部对齐
      textStyle: {
        fontSize: 6, // 字体大小
        color: '#fff', // 字体颜色
      },
    },

设置X轴的文字大小和颜色

 axisLabel: {
        color: '#ffffff',
        fontSize: 5,
      },

设置X轴的轴线的颜色

 axisLine: {
        show: true,
        lineStyle: {
          color: '#022241', // X 轴轴线颜色
          width: 0.8,
        },
      },

指定Y轴的刻度

      type: 'value',
      min: 0, // 最小值
      max: 6, // 最大值
      interval: 2, // 刻度间隔

设置Y轴边上文字的大小和颜色

  axisLabel: {
        // 设置Y轴文字颜色
        color: '#ffffff',
        fontSize: 5,
      },

隐藏 Y 轴的网格线

splitLine: {
        show: false, // 隐藏 Y 轴的网格线
      },

设置图表实体内容的样式

 // 开启平滑曲线
smooth: true,
label: {
 //隐藏y轴轴线
  show: false,
},
areaStyle: {
// 设置填充区域的颜色（半透明蓝色）
  color: 'rgba(34, 92, 214, 0.3)', 
},