从柱状堆叠图带你入门Echarts

最新推荐文章于 2025-03-10 15:46:22 发布

EvenyYl丶

最新推荐文章于 2025-03-10 15:46:22 发布

阅读量1k

点赞数 2

文章标签： html 数据可视化 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_40597589/article/details/109163369

版权

本文是一篇关于Echarts入门的文章，通过柱状堆叠图的制作，介绍了如何在Vue中安装和使用Echarts，包括动态数据获取、图表配置等，帮助读者理解Echarts的基本用法和需求进阶。

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

前言

实习一个多月了，在部门里负责了度量模块的页面编写，主要涉及的技术就是Echatrs。在此之前，我只稍微接触过python的数据可视化，并没有接触过Echarts。不过现在将度量模块的几个页面写下来，已经可以说是入门了，本文从图的展示需求着手，以柱状堆叠图的各种需求图为例，一步步带你们了解Echarts

Echarts入门

1 安装

①输入npm install echarts安装
②然后在main.js中全局引入import echarts from "echarts"，Vue.prototype.$echarts = echarts，加入以上两行代码

2 如何在vue中使用echarts

2.1 给定一块区域

在<template></template>中给定一块区域

<div id="myChart1" :style="{width: '100%', height: '700px'}"></div>

2.2 在methods中写入一个方法

drawImg1() {
   
    // 基于准备好的dom，初始化echarts实例
    let myChart1 = this.$echarts.init(
        document.getElementById("myChart1")
    );
    // 绘制图表
    myChart1.setOption({
   

    });
},

setOption中写入官方的例子，官方的样例链接官方柱状堆叠图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x53eAM3l-1603096099364)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bab86088be64e0c94e1042c354b05a4~tplv-k3u1fbpfcp-watermark.image)]
直接复制过来，然后代码如下

  drawImg1() {
   
        // 基于准备好的dom，初始化echarts实例
        let myChart1 = this.$echarts.init(
            document.getElementById("myChart1")
        );
        // 绘制图表
        myChart1.setOption({
   
			tooltip: {
   
            trigger: 'axis',
              axisPointer: {
               // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
   
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            grid: {
   
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
   
                type: 'value'
            },
            yAxis: {
   
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            series: [
                {
   
                    name: '直接访问',
                    type: 'bar',
                    stack: '总量',
                    label: {
   
                        show: true,
                        position: 'insideRight'
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
   
                    name: '邮件营销',
                    type: 'bar',
                    stack: '总量',
                    label: {
   
                        show: true,
                        position: 'insideRight'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
   
                    name: '联盟广告',
                    type: 'bar',
                    stack: '总量',
                    label: {
   
                        show: true,
                        position: 'insideRight'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
   
                    name: '视频广告',
                    type: 'bar',
                    stack: '总量',
                    label: {
   
                        show: true,
                        position: 'insideRight'
                    },
                    data: [150,</

最低0.47元/天解锁文章