vue插入动态条形图

最新推荐文章于 2024-06-26 08:24:50 发布
最新推荐文章于 2024-06-26 08:24:50 发布
阅读量1k 收藏 1
点赞数 2
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43487246/article/details/108584767
版权

之前写了一个不是在VUE中使用的,链接在下面
https://blog.csdn.net/weixin_43487246/article/details/108379945

现在写一个可以在VUE中使用的,需要的JS和CSS下面链接中有
链接: https://pan.baidu.com/s/1AJorh5h9sq7TlXXqhTr7sQ 提取码: cjxt

首先在index.html中添加,注意一定要在这里添加

<html>
 <head>
 <script src="https://d3js.org/d3.v5.min.js"></script>//这个也需要添加进来
 </head>
<body>
    <div id="app">
      <center>//这里是开始 注意js的路径啊 最好是在static文件夹下面 写自己的路径
        <!--<input type="file" hidden id="inputfile" name="fileContent">-->
        <svg width="1200" height="800"></svg>
        <script type="text/javascript" src="static/js/jquery-3.5.1.js"></script>
        <script src="static/js/config.js"></script>
        <script src="static/js/imgs.js"></script>
        <script src="static/js/color_ranges.js"></script>
        <script src="static/js/colors.js"></script>
        <script src="static/js/visual.js"></script>
        <link rel="stylesheet" href="src/assets/bootstrap3.3.7/css/stylesheet.css">
      </center>//这里是结束 添加这一段就可以了
    </div>
    <!-- built files will be auto injected -->
  </body>
  </html>

第二步是你要在哪个vue组件里使用就在哪里写以下代码

<template> 
    <svg  width="1000" height="470" ></svg> //具体格式大小位置自己掂量 上面要不要套div看需不需要
</template>

<script>
import "../../assets/bootstrap3.3.7/css/stylesheet.css"//引入css文件样式 写自己的路径
export default {
    name: 'Mining',
    mounted () {
      this.initMap()
      },
    methods: {
    initMap(){
        var title="name,type,value,date";
        var valueArray =  "\n沈阳市,辽宁省,41243,2005/1/1" +
          "\n沈阳市,辽宁省,11243,2006/1/1" +
          "\n沈阳市,辽宁省,51243,2007/1/1" +
          "\n沈阳市,辽宁省,61244,2008/1/1" +
          "\n沈阳市,辽宁省,76245,2009/1/1" +
          "\n沈阳市,辽宁省,81246,2010/1/1" +
          "\n沈阳市,辽宁省,91247,2011/1/1" +
          "\n沈阳市,辽宁省,101248,2012/1/1" +
          "\n沈阳市,辽宁省,121249,2013/1/1" +
          "\n沈阳市,辽宁省,131250,2014/1/1" +
          "\n沈阳市,辽宁省,141251,2015/1/1" +
          "\n沈阳市,辽宁省,151252,2016/1/1" +
          "\n沈阳市,辽宁省,161253,2017/1/1" +
          "\n沈阳市,辽宁省,172254,2018/1/1" +
          "\n沈阳市,辽宁省,186485,2019/1/1" +
          "\n沈阳市,辽宁省,186486,2020/1/1" +
          "\n大连市,辽宁省,12412,2005/1/1" +
          "\n大连市,辽宁省,43343,2006/1/1" +
          "\n大连市,辽宁省,34645,2007/1/1" +
          "\n大连市,辽宁省,44646,2008/1/1" +
          "\n大连市,辽宁省,54647,2009/1/1" +
          "\n大连市,辽宁省,64648,2010/1/1" +
          "\n大连市,辽宁省,74649,2011/1/1" +
          "\n大连市,辽宁省,84650,2012/1/1" +
          "\n大连市,辽宁省,94651,2013/1/1" +
          "\n大连市,辽宁省,104652,2014/1/1" +
          "\n大连市,辽宁省,124653,2015/1/1" +
          "\n大连市,辽宁省,34654,2016/1/1" +
          "\n大连市,辽宁省,155555,2017/1/1" +
          "\n大连市,辽宁省,155556,2018/1/1" +
          "\n大连市,辽宁省,155557,2019/1/1" +
          "\n大连市,辽宁省,155558,2020/1/1" +
          "\n鞍山市,辽宁省,12312,2005/1/1" +
          "\n鞍山市,辽宁省,22312,2006/1/1" +
          "\n鞍山市,辽宁省,32312,2007/1/1" +
          "\n鞍山市,辽宁省,32313,2008/1/1" +
          "\n鞍山市,辽宁省,32314,2009/1/1" +
          "\n鞍山市,辽宁省,32315,2010/1/1" +
          "\n鞍山市,辽宁省,32316,2011/1/1" +
          "\n鞍山市,辽宁省,32317,2012/1/1" +
          "\n鞍山市,辽宁省,32318,2013/1/1" +
          "\n鞍山市,辽宁省,32319,2014/1/1" +
          "\n鞍山市,辽宁省,32320,2015/1/1" +
          "\n鞍山市,辽宁省,32321,2016/1/1" +
          "\n鞍山市,辽宁省,32322,2017/1/1" +
          "\n鞍山市,辽宁省,32323,2018/1/1" +
          "\n鞍山市,辽宁省,32324,2019/1/1" +
          "\n鞍山市,辽宁省,32325,2020/1/1" +
          "\n抚顺市,辽宁省,21412,2005/1/1" +
          "\n抚顺市,辽宁省,61412,2006/1/1" +
          "\n抚顺市,辽宁省,11412,2007/1/1" +
          "\n抚顺市,辽宁省,11413,2008/1/1" +
          "\n抚顺市,辽宁省,11414,2009/1/1" +
          "\n抚顺市,辽宁省,11415,2010/1/1" +
          "\n抚顺市,辽宁省,11416,2011/1/1" +
          "\n抚顺市,辽宁省,11417,2012/1/1" +
          "\n抚顺市,辽宁省,11418,2013/1/1" +
          "\n抚顺市,辽宁省,11419,2014/1/1" +
          "\n抚顺市,辽宁省,11420,2015/1/1" +
          "\n抚顺市,辽宁省,11421,2016/1/1" +
          "\n抚顺市,辽宁省,11422,2017/1/1" +
          "\n抚顺市,辽宁省,11423,2018/1/1" +
          "\n抚顺市,辽宁省,11424,2019/1/1" +
          "\n抚顺市,辽宁省,11425,2020/1/1" +
          "\n本溪市,辽宁省,24124,2005/1/1" +
          "\n本溪市,辽宁省,23123,2006/1/1" +
          "\n本溪市,辽宁省,12311,2007/1/1" +
          "\n本溪市,辽宁省,12312,2008/1/1" +
          "\n本溪市,辽宁省,12313,2009/1/1" +
          "\n本溪市,辽宁省,12314,2010/1/1" +
          "\n本溪市,辽宁省,12315,2011/1/1" +
          "\n本溪市,辽宁省,12316,2012/1/1" +
          "\n本溪市,辽宁省,12317,2013/1/1" +
          "\n本溪市,辽宁省,12318,2014/1/1" +
          "\n本溪市,辽宁省,12319,2015/1/1" +
          "\n本溪市,辽宁省,12320,2016/1/1" +
          "\n本溪市,辽宁省,12321,2017/1/1" +
          "\n本溪市,辽宁省,12322,2018/1/1" +
          "\n本溪市,辽宁省,12323,2019/1/1" +
          "\n本溪市,辽宁省,12324,2020/1/1" +
          "\n丹东市,辽宁省,41124,2005/1/1" +
          "\n丹东市,辽宁省,73123,2006/1/1" +
          "\n丹东市,辽宁省,123111,2007/1/1" +
          "\n丹东市,辽宁省,123112,2008/1/1" +
          "\n丹东市,辽宁省,123113,2009/1/1" +
          "\n丹东市,辽宁省,123114,2010/1/1" +
          "\n丹东市,辽宁省,123115,2011/1/1" +
          "\n丹东市,辽宁省,123116,2012/1/1" +
          "\n丹东市,辽宁省,123117,2013/1/1" +
          "\n丹东市,辽宁省,123118,2014/1/1" +
          "\n丹东市,辽宁省,123119,2015/1/1" +
          "\n丹东市,辽宁省,123120,2016/1/1" +
          "\n丹东市,辽宁省,123121,2017/1/1" +
          "\n丹东市,辽宁省,123122,2018/1/1" +
          "\n丹东市,辽宁省,123123,2019/1/1" +
          "\n丹东市,辽宁省,123124,2020/1/1" +
          "\n锦州市,辽宁省,1051,2005/1/1" +
          "\n锦州市,辽宁省,2051,2006/1/1" +
          "\n锦州市,辽宁省,3051,2007/1/1" +
          "\n锦州市,辽宁省,4051,2008/1/1" +
          "\n锦州市,辽宁省,5052,2009/1/1" +
          "\n锦州市,辽宁省,6004,2010/1/1" +
          "\n锦州市,辽宁省,7581,2011/1/1" +
          "\n锦州市,辽宁省,8154,2012/1/1" +
          "\n锦州市,辽宁省,9752,2013/1/1" +
          "\n锦州市,辽宁省,9841,2014/1/1" +
          "\n锦州市,辽宁省,20002,2015/1/1" +
          "\n锦州市,辽宁省,25470,2016/1/1" +
          "\n锦州市,辽宁省,10054,2017/1/1" +
          "\n锦州市,辽宁省,50149,2018/1/1" +
          "\n锦州市,辽宁省,76150,2019/1/1" +
          "\n锦州市,辽宁省,76151,2020/1/1" +
          "\n营口市,辽宁省,15496,2005/1/1" +
          "\n营口市,辽宁省,17497,2006/1/1" +
          "\n营口市,辽宁省,19498,2007/1/1" +
          "\n营口市,辽宁省,14499,2008/1/1" +
          "\n营口市,辽宁省,25500,2009/1/1" +
          "\n营口市,辽宁省,19501,2010/1/1" +
          "\n营口市,辽宁省,18002,2011/1/1" +
          "\n营口市,辽宁省,15503,2012/1/1" +
          "\n营口市,辽宁省,15504,2013/1/1" +
          "\n营口市,辽宁省,15505,2014/1/1" +
          "\n营口市,辽宁省,15506,2015/1/1" +
          "\n营口市,辽宁省,15507,2016/1/1" +
          "\n营口市,辽宁省,15508,2017/1/1" +
          "\n营口市,辽宁省,15509,2018/1/1" +
          "\n营口市,辽宁省,15510,2019/1/1" +
          "\n营口市,辽宁省,15511,2020/1/1" +
          "\n阜新市,辽宁省,15496,2005/1/1" +
          "\n阜新市,辽宁省,15497,2006/1/1" +
          "\n阜新市,辽宁省,15498,2007/1/1" +
          "\n阜新市,辽宁省,15499,2008/1/1" +
          "\n阜新市,辽宁省,15500,2009/1/1" +
          "\n阜新市,辽宁省,15501,2010/1/1" +
          "\n阜新市,辽宁省,15502,2011/1/1" +
          "\n阜新市,辽宁省,15503,2012/1/1" +
          "\n阜新市,辽宁省,15504,2013/1/1" +
          "\n阜新市,辽宁省,15505,2014/1/1" +
          "\n阜新市,辽宁省,15506,2015/1/1" +
          "\n阜新市,辽宁省,15507,2016/1/1" +
          "\n阜新市,辽宁省,15508,2017/1/1" +
          "\n阜新市,辽宁省,15509,2018/1/1" +
          "\n阜新市,辽宁省,15510,2019/1/1" +
          "\n阜新市,辽宁省,15511,2020/1/1" +
          "\n辽阳市,辽宁省,25500,2005/1/1" +
          "\n辽阳市,辽宁省,25501,2006/1/1" +
          "\n辽阳市,辽宁省,25502,2007/1/1" +
          "\n辽阳市,辽宁省,25503,2008/1/1" +
          "\n辽阳市,辽宁省,25504,2009/1/1" +
          "\n辽阳市,辽宁省,25505,2010/1/1" +
          "\n辽阳市,辽宁省,25506,2011/1/1" +
          "\n辽阳市,辽宁省,25507,2012/1/1" +
          "\n辽阳市,辽宁省,25508,2013/1/1" +
          "\n辽阳市,辽宁省,25509,2014/1/1" +
          "\n辽阳市,辽宁省,25510,2015/1/1" +
          "\n辽阳市,辽宁省,25511,2016/1/1" +
          "\n辽阳市,辽宁省,25512,2017/1/1" +
          "\n辽阳市,辽宁省,25513,2018/1/1" +
          "\n辽阳市,辽宁省,25514,2019/1/1" +
          "\n辽阳市,辽宁省,25515,2020/1/1" +
          "\n盘锦市,辽宁省,9841,2005/1/1" +
          "\n盘锦市,辽宁省,9842,2006/1/1" +
          "\n盘锦市,辽宁省,10843,2007/1/1" +
          "\n盘锦市,辽宁省,11844,2008/1/1" +
          "\n盘锦市,辽宁省,12845,2009/1/1" +
          "\n盘锦市,辽宁省,13846,2010/1/1" +
          "\n盘锦市,辽宁省,9847,2011/1/1" +
          "\n盘锦市,辽宁省,9848,2012/1/1" +
          "\n盘锦市,辽宁省,15849,2013/1/1" +
          "\n盘锦市,辽宁省,9850,2014/1/1" +
          "\n盘锦市,辽宁省,17851,2015/1/1" +
          "\n盘锦市,辽宁省,11852,2016/1/1" +
          "\n盘锦市,辽宁省,10853,2017/1/1" +
          "\n盘锦市,辽宁省,15854,2018/1/1" +
          "\n盘锦市,辽宁省,19855,2019/1/1" +
          "\n盘锦市,辽宁省,20856,2020/1/1" +
          "\n铁岭市,辽宁省,9847,2005/1/1" +
          "\n铁岭市,辽宁省,9848,2006/1/1" +
          "\n铁岭市,辽宁省,9849,2007/1/1" +
          "\n铁岭市,辽宁省,9850,2008/1/1" +
          "\n铁岭市,辽宁省,9851,2009/1/1" +
          "\n铁岭市,辽宁省,9852,2010/1/1" +
          "\n铁岭市,辽宁省,9853,2011/1/1" +
          "\n铁岭市,辽宁省,9854,2012/1/1" +
          "\n铁岭市,辽宁省,9855,2013/1/1" +
          "\n铁岭市,辽宁省,9856,2014/1/1" +
          "\n铁岭市,辽宁省,9857,2015/1/1" +
          "\n铁岭市,辽宁省,9858,2016/1/1" +
          "\n铁岭市,辽宁省,9859,2017/1/1" +
          "\n铁岭市,辽宁省,9860,2018/1/1" +
          "\n铁岭市,辽宁省,9861,2019/1/1" +
          "\n铁岭市,辽宁省,9862,2020/1/1" +
          "\n朝阳市,辽宁省,12845,2005/1/1" +
          "\n朝阳市,辽宁省,12846,2006/1/1" +
          "\n朝阳市,辽宁省,12847,2007/1/1" +
          "\n朝阳市,辽宁省,12848,2008/1/1" +
          "\n朝阳市,辽宁省,12849,2009/1/1" +
          "\n朝阳市,辽宁省,12850,2010/1/1" +
          "\n朝阳市,辽宁省,12851,2011/1/1" +
          "\n朝阳市,辽宁省,12852,2012/1/1" +
          "\n朝阳市,辽宁省,12853,2013/1/1" +
          "\n朝阳市,辽宁省,12854,2014/1/1" +
          "\n朝阳市,辽宁省,12855,2015/1/1" +
          "\n朝阳市,辽宁省,12856,2016/1/1" +
          "\n朝阳市,辽宁省,12857,2017/1/1" +
          "\n朝阳市,辽宁省,12858,2018/1/1" +
          "\n朝阳市,辽宁省,12859,2019/1/1" +
          "\n朝阳市,辽宁省,12860,2020/1/1" +
          "\n葫芦岛市,辽宁省,9850,2005/1/1" +
          "\n葫芦岛市,辽宁省,9851,2006/1/1" +
          "\n葫芦岛市,辽宁省,9852,2007/1/1" +
          "\n葫芦岛市,辽宁省,9853,2008/1/1" +
          "\n葫芦岛市,辽宁省,9854,2009/1/1" +
          "\n葫芦岛市,辽宁省,9855,2010/1/1" +
          "\n葫芦岛市,辽宁省,9856,2011/1/1" +
          "\n葫芦岛市,辽宁省,9857,2012/1/1" +
          "\n葫芦岛市,辽宁省,9858,2013/1/1" +
          "\n葫芦岛市,辽宁省,9859,2014/1/1" +
          "\n葫芦岛市,辽宁省,9860,2015/1/1" +
          "\n葫芦岛市,辽宁省,9861,2016/1/1" +
          "\n葫芦岛市,辽宁省,9862,2017/1/1" +
          "\n葫芦岛市,辽宁省,9863,2018/1/1" +
          "\n葫芦岛市,辽宁省,9864,2019/1/1" +
          "\n葫芦岛市,辽宁省,9865,2020/1/1";

        var data = title + valueArray;
        var fileName =  "download.csv";
        this.initCsvLink(data,fileName);
      },

      initCsvLink(data,fileName){
        data = "\ufeff"+data;
        var blob = new Blob([data], { type: "text/csv,charset=UTF-8"});
        var r = new FileReader();
        r.readAsText(blob, "UTF-8");
        r.onload = function () {
          //读取完成后，数据保存在对象的result属性中
          var data = d3.csvParse(this.result);
          draw(data);
        };
      },
    }
   }
</script>

下面是实际样子
在这里插入图片描述

哆啦A梦是童年
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
基于VUE的网络拓扑图动态线条实现
04-30
网络拓扑图动态线条实现
Vue实现搜索结果高亮显示关键字
10-16
在父组件中，我们利用v-model和v-for指令实现了搜索框和搜索结果的动态渲染；在子组件中，我们通过props获取搜索关键字，并通过正则表达式匹配关键字位置，并替换为带有样式的标签实现高亮显示。通过合理的CSS样式...
柱状图多维条形图vue_vue实现一个动效柱状图
weixin_26933735的博客
01-11 345
接手了一个需求的时候，其中有个 UI图是这样的：按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二就弄完。不过，作为一个老(xian)实(de)正(dan)直(teng)的程序员，怎么可以容忍弄虚作假呢，我心中默默计算了下，用代码把这张图画出...
Vue组件生命周期深度剖析：从创建到销毁的八大钩子实战指南
最新发布
啊猪是的读来过倒的博客
06-26 2158
本文将详细介绍Vue组件的生命周期，包括其各个阶段的含义和作用，以及每个阶段所对应的钩子函数的使用方法。我们将逐一解析beforeCreated、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed这八大钩子函数，并通过一个简单的实际代码案例展示它们的具体应用。
vue3 + openlayers---流动线条（含动画效果）
QDxin_xyz的博客
05-17 357
【代码】vue3 + openlayers---流动线条（含动画效果）
vue 条形进度图
nxzjl的博客
07-19 914
vue 条形进度图
vue2动态横条图（横条图样式定时切换）
Shi_haoliu的博客
06-18 233
组件代码 – 动态变化的柱子还可以用其他的img图去替换，修改makeOption(type, symbol, datas) symbol的值代表了图，注意type为bar设置symbol无效。调用代码 – 因为我同时调了4个 所以传了个id。
vuepress-theme-chartjs:VuePress主题，用于Chart.js组织中的项目
03-30
Chart.js是一个轻量级、灵活的JavaScript库，用于创建各种图表，如条形图、饼图、线图等。 VuePress Theme Chartjs的主要特点和功能可能包括： 1. **集成Chart.js**：该主题直接内置了对Chart.js的支持，使得用户...
十个html模板，词云图、动态图、统计图、玫瑰图、象形图、多渐变色柱状图、双色叠加象形图等多个图。直接用，不用再下载js包
04-15
3. **统计图**：统计图是数据可视化的常见工具，如条形图、折线图、饼图等，用于清晰地表示统计数据。使用这些模板，开发者可以直接插入数据并自定义样式，而无需额外的库或插件。 4. **玫瑰图**：玫瑰图（也称为风...
web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印
05-15
web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印 该资源提供了一个vue混入，通过混入提供一个可直接使用的方法执行打印。 在现代物流、仓储和零售行业中，RFID和二维码技术发挥着至关重要的...
food-inspection-map-htx:休斯顿市民黑客马拉松的食品检验评级图
06-05
D3可以帮助开发者在网页上创建复杂的图表和图形，如条形图或饼图，以直观地展示餐厅的评分分布。 为了提高用户体验，开发者可能会利用CSS预处理器（如Sass或Less）编写样式，它们提供了更强大的功能，如变量、嵌套...
步骤条Demo
09-07
步骤条的示例代码，单独的步骤条的实例以及将步骤条应用到页面上的实例。
VUE element-ui响应式步骤进度条样式代码
06-11
几款简单的基于VUE element-ui响应式步骤进度条样式代码，active往里传值即可显示步骤。
Barchartrace_test 条形竞赛图 动态可视化条形图
05-15
Barchartrace，条形竞赛图 动态可视化条形图，IE11和360安全浏览器下调试通过！JSON对象中的image得发布成web服务才能正常显示图片，否则一直提示图片路径错误！
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
12-29
1 前言 1.1 业务场景 图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用 [removed].href 下载图片时，并不会保存到本地，会在浏览器打开。 2 实现原理 2.1 绘制画布 <el title=查看图片 visible.sync=dialogJPG > <canvas id=mycanvas width=940 height=570></canvas> </el> 这里为了交互体验，使用了 element-ui 的
vue柱状进度条图像的完美实现方案
01-19
前言 本文是对bar进度条实现的2种方案进行分享，第一种是很简单，纯css的实现，第二种是echart的实现。 css的实现 css实现很简单。代码如下： <template> <div class=haoroomflex> <div v-for=(item,index) key=index class=onebar> <div class=bar> <span class=progress xss=removed> </div> <div class
vue 中使用canvas画简单的线条动画效果
miaofangchao的博客
12-18 4605
vue 中使用canvas画简单的线条动画效果； 问题：1.没有写X轴或者Y轴不变的逻辑判断；2.不会画弧度，不知道弧线怎么去单个像素的画。 method中定义方法： getCanvas(start,end){ return new Promise(resolve=>{ let movingDistance_x = Math.abs(end.x - start.x) //x轴需要移动的距离 let movingDistance_y = Math.abs(
Vue2步骤条（Steps）
热门推荐
Mr Dear的博客
08-04 1万+
步骤总数和初始选择步骤 均可自定义设置，每个步骤title和description也均可自定义设置传入
vue 框架下 echarts 包的基本使用，实现条形图
weixin_44014654的博客
04-19 709
第一步，安装 echarts npm install echarts 第二布，写代码 <template> <div class="app-container"> <div id="drawChart" style="width: 600px; height: 400px; border: 5px solid red"></div> </div> </template> <script> import *
vue统计分析条形图
09-01
在Vue中实现统计分析条形图的方法有很多，下面我将为您介绍一种常用的方案。 首先，您可以选择使用一些可视化图表库来实现条形图，比如ECharts、Chart.js或者D3.js。这些库都提供了丰富的API和组件，可以方便地创建各种类型的图表。 在Vue项目中使用ECharts可以按照以下步骤进行： 1. 安装ECharts库：在命令行中运行以下命令来安装ECharts： ``` npm install echarts --save ``` 2. 创建一个统计分析组件：在Vue项目中创建一个新的组件，比如`BarChart.vue`。 3. 在组件中引入ECharts： ```javascript import echarts from 'echarts' ``` 4. 在`mounted`钩子函数中初始化图表并传入数据： ```javascript mounted() { // 基于准备好的DOM，初始化ECharts实例 var myChart = echarts.init(this.$refs.chartContainer) // 定义图表的配置项和数据 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] } // 使用刚指定的配置项和数据显示图表 myChart.setOption(option) } ``` 5. 在组件的模板中添加一个用于渲染图表的容器： ```html <template> <div ref="chartContainer" style="width: 100%; height: 400px;"></div> </template> ``` 这样，您就可以在Vue项目中使用ECharts来展示统计分析条形图了。当然，您也可以根据实际需要调整图表的样式和配置，以满足您的需求。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值