在vue中使用Echarts图表工具

城南花开ze

于 2019-12-28 11:03:00 发布

阅读量485

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue Echarts vue使用Echarts

本文链接：https://blog.youkuaiyun.com/weixin_42614080/article/details/103742180

Vue 专栏收录该内容

128 篇文章

订阅专栏

本文详细介绍了使用Echarts创建图表的六个步骤，包括下载、引入、初始化、定义数据、绘制图表及响应窗口调整，帮助初学者快速上手。

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

一、第一步，下载Echarts，通过npm install echarts --save 或者是 cnpm install echarts --save 命令进行下载。

    npm install echarts --save

二、第二步，引入Echarts，代码如下所示：

    var echarts = require('echarts');

三、第三步，对于Echarts进行初始化，main 是之前定义好的DOM元素，代码如下所示：

    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]
    }]
});

五、第五步，解决浏览器窗口缩小导致超出边界，可以添加这一行代码，代码如下所示：

     window.addEventListener('resize',function() {myChart.resize()});

六、第六步，最后的Echarts图表显示，如图所示：
在这里插入图片描述