在vue中引入echarts图表

最新推荐文章于 2025-05-01 19:33:49 发布

话小说

最新推荐文章于 2025-05-01 19:33:49 发布

阅读量249

点赞数

文章标签： echarts vue.js 前端

本文链接：https://blog.youkuaiyun.com/ajdhakj6/article/details/128006371

版权

这篇博客介绍了如何通过NPM在Vue项目中安装ECharts库，并展示了如何在Vue组件中引入ECharts，初始化图表并在onMounted钩子中绘制数据。内容包括安装命令、导入方式、以及在实际代码示例中如何设置图表选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NPM 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

引入 ECharts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

在vue中必须在 onMounted()挂载后才能获取到 dom 渲染echarts图表

const excel = () =>{
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
    var myChart = echarts.init(main.value as HTMLElement);
    myChart.setOption({
        tooltip: {
            axisPointer: {
                type: 'cross',
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        legend: {
            data: [tap.value],
            bottom: '3%',
            right: '5%'
        },
        xAxis: {
            data: list
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        series: [
        {
            name: tap.value,
            type: 'line',
            data: dayData.value.total
        }
    ]
    });
}

onMounted(() =>{
    excel();
})