精华内容
下载资源
问答
  • 在vue中使用echarts
    2022-06-08 14:56:39

    一、在Vue中使用echarts

    1、安装 echarts 依赖:echarts

    npm install echarts -S
    // 或者使用淘宝的镜像
    npm install -g cnpm --registry=https:// registry.npm.taobao.org
    cnpm install echarts -S
    

    2、创建图表

    // 首先需要全局引入
    // 在main.js中
    // 引入echarts
    import echarts from 'echarts';
    Vue.prototype.$echarts = echarts;
    
    // 在Echarts.vue中
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    
    export default {
        name: 'hello',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom,初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                // 绘制图表
                myChart.setOption({
                    title: { text: '在Vue中使用echarts' },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            }
        }
    }
    // 注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。
    

    3、按需引入

    // 由于全局引入会将所有的echarts图表打包,导致体积过大
    // 在Echarts.vue文件中
    // 使用 require 而不是 import
    
    // 引入基本模板
    let echarts = require('echarts/lib/echarts');
    // 引入柱状图组件
    require('echarts/lib/chart/bar');
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    

    二、Apache ECharts 官网

    1、新版官网

    2、旧版官网

    更多相关内容
  • 主要介绍了Vue中使用echarts的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 在vue中使用echarts

    万次阅读 多人点赞 2022-03-04 09:41:18
    使用 8、11:25-32 "export 'default' (imported as 'echarts') was not found in 'echarts 1、安装 npm install echarts --save 2、在vue中引入(全局引入) // 引入echarts import echarts from 'echarts' Vue....

    欢迎大家加入我的社区:http://t.csdn.cn/Q52km
    社区中不定时发红包

    1、安装

    npm install echarts --save
    

    2、在vue中引入(全局引入)

    // 引入echarts
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    
    

    3、在vue中的使用

    需要用到echart的地方先设置一个div的id、宽高

    提示:
    可以在一个页面中引入多个数据报表模板
    使用div进行位置的排版放置


    4、模板代码放在哪个位置

    重点注意:其中const option = { }就是我们需要引进echart图表的代码

    
    <template>
      <div>
        <div ref="chart" style="width:50%;height:376px"></div>
      </div>
    
    </template>
    

    要在mounted生命周期函数中实例化echarts对象。确保dom元素已经挂载到页面中。

    mounted(){
        this.getEchartData()  
        },
    
    
       methods: {
        getEchartData() {
          const chart = this.$refs.chart
          if (chart) {
            const myChart = this.$echarts.init(chart)
            const option = {...}
            myChart.setOption(option)
            window.addEventListener("resize", function() {
              myChart.resize()
            })
          }
           this.$on('hook:destroyed',()=>{
             window.removeEventListener("resize", function() {
              myChart.resize();
            });
            })
        }
      }
    

    5、完整的一个vue页面实例:

    
    <template>
      <div>
        <div ref="chart" style="width:50%;height:376px"></div>
        <div ref="chart1" style="width:50%;height:376px"></div>
      </div>
    
    </template>
    
    <script>
    
      export default {
        data() {
    
        },
        mounted() {
          this.getEchartData()
          this.getEchartData1()
    
        },
        methods: {
          getEchartData() {
            const chart = this.$refs.chart
            if (chart) {
              const myChart = this.$echarts.init(chart)
              const option = { legend: {},
                tooltip: {},
                dataset: {
                  source: [
    
                    ['订单', 43.3, 85.8],
                    ['订单1', 83.1, 73.4],
                    ['订单2', 86.4, 65.2],
                    ['订单3', 72.4, 53.9],
                    ['订单4', 82.4, 53.9],
                    ['订单5', 42.4, 53.9],
                    ['订单6', 72.4, 53.9],
                    ['订单7', 72.4, 53.9]
                  ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
    
                series: [ { type: 'bar' }, { type: 'bar' }]}
              myChart.setOption(option)
              window.addEventListener("resize", function() {
                myChart.resize()
              })
            }
            this.$on('hook:destroyed',()=>{
              window.removeEventListener("resize", function() {
                myChart.resize();
              });
            })
          },
          getEchartData1() {
            const chart1 = this.$refs.chart1
            if (chart1) {
              const myChart = this.$echarts.init(chart1)
              const option = {
                title: {
                  text: 'Stacked Line'
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                toolbox: {
                  feature: {
                    saveAsImage: {}
                  }
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230]
                  },
                  {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330]
                  },
                  {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330]
                  },
                  {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330]
                  },
                  {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330]
                  }
                ]
    
              }
              myChart.setOption(option)
              window.addEventListener("resize", function() {
                myChart.resize()
              })
            }
            this.$on('hook:destroyed',()=>{
              window.removeEventListener("resize", function() {
                myChart.resize();
              });
            })
          },
         
     
        },
        watch: {},
        created() {
        }
      }
    </script>
    
    
    
    

    6、实现效果

    在这里插入图片描述


    7、可能遇到的问题,下载不成功。使用

    cnpm install echarts --save
    

    在这里插入图片描述


    8、11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts

    修改引入的方式

    // 引入echarts
    import *as echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    
    
    

    在这里插入图片描述

    展开全文
  • 主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 公司的项目需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他...
  • 2.main.js引入echarts import echarts from ‘echarts’ 3.main.js安装 Vue.prototype.echarts = echarts; 一般来说能正常挂载上组件,就可以页面正常使用了 废话不多说上代码(因为自己也是小白...
  • 主要介绍了在vue中使用Echarts画曲线图的示例,帮助大家在vue中绘制图表,感兴趣的朋友可以了解下
  • 本文通过实例代码给大家介绍了在vue中使用echarts图表的方法,需要注意的事项文中给大家提到,需要的朋友可以参考下
  • 在vue中使用echarts的方法

    首先 要先给一个盒子 设置宽高! 不能使用百分比 只能用px

    然后在methods里绘制图表 并通过 setOption 方法生成一个简单的图表,

    之后 要把方法挂载到钩子函数mounted()中调用 

    <template>
      <div>
        <div id="myChart" :style="{ width: '400px', height: '300px' }"></div>
        <div id="myTry" :style="{ width: '400px', height: '300px' }"></div>
      </div>
    </template>
    
    <script>
    export default {
      name: "hello",
      data() {
        return {
          msg: "Welcome to Your Vue.js App",
        };
      },
    
      methods: {
        drawLine() {
          // 基于准备好的dom,初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            title: { text: "商场跳楼价" },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫"],
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36],
              },
            ],
          });
        },
        try() {
        let myTry = this.$echarts.init(document.getElementById("myTry"));
          myTry.setOption({
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: [820, 932, 901, 934, 1290, 1110, 1320],
                type: "line",
                smooth: true,
              },
              {
                data: [900, 951, 901, 852, 1520, 1330, 1200],
                type: "line",
                smooth: true,
              },
            ],
          });
          
        },
    
      },
      mounted() {
        this.drawLine();
        this.try();
      },
    };
    </script>
    
    

     修改图表的样式问题:

    修改柱状图的宽度 只需要加barWidth宽度即可

            series: [
              {
                data: [40, 50, 30],
                type: "bar",
                barWidth : 30,//柱图宽度
              },
            ],

    一个简单的饼图

    柱条间距

    柱条间距分为两种, barGap和 barCategoryGap

    barGap是a柱状图里 两个小图之间的间距   barCategoryGap是每个abc之间的间距 可以使用百分比

     

    展开全文
  • 在Vue中使用echarts的两种方式

    千次阅读 2021-09-24 08:52:41
    方式一、直接引入echarts 先npm安装echarts npm install echarts --... * 各种画echarts图表的方法都封装这里 * 注意:这里echarts没有采用按需引入的方式,只是为了方便学习 */ import echarts from 'echarts.

    方式一、直接引入echarts


    先npm安装echarts

    npm install echarts --save

     

    代码:

    main.js

    import myCharts from './comm/js/myCharts.js'
    Vue.use(myCharts)

    myCharts.js

    /**
     * 各种画echarts图表的方法都封装在这里
     * 注意:这里echarts没有采用按需引入的方式,只是为了方便学习
     */
    
    import echarts from 'echarts'
    const install = function(Vue) {
        Object.defineProperties(Vue.prototype, {
            $chart: {
                get() {
                    return {
                        //画一条简单的线
                        line1: function (id) {
                            this.chart = echarts.init(document.getElementById(id));
                            this.chart.clear();
    
                            const optionData = {
                                xAxis: {
                                    type: 'category',
                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                                    type: 'line',
                                    smooth: true
                                }]
                            };
    
                            this.chart.setOption(optionData);
                        },
                    }
                }
            }
        })
    }
    
    export default {
        install
    }
    

    HelloWorld.vue

    <template>
      <div class="hello">
        <div id="chart1"></div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
        }
      },
      mounted() {
        this.$chart.line1('chart1');
      }
    }
    </script>
    
    <style scoped>
      #chart1 {
        width: 300px;
        height: 300px;
      }
    </style>
    

    效果

    方式二、使用vue-echarts


    先npm安装vue-echarts

    npm install echarts vue-echarts

     

    代码:

    除了全量引用echarts,我们还可以采用按需引入的方式
    main.js

    import ECharts from 'vue-echarts'
    import 'echarts/lib/chart/line'
    Vue.component('chart', ECharts)

     Helloworld.vue

    <template>
      <div class="hello">
        <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          orgOptions: {},
        }
      },
      mounted() {
        this.orgOptions = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        }
      }
    }
    </script>
    

     博主建议:如果只是小需求,不要求太高,可以使用vue-echarts;但是如果要求高,需求大,那么建议用echarts,因为echarts的官方文档写的很详细,vue-echarts的文档相对较少,虽然两者用法几乎一样,但是在部分功能实现还是有差别的。

    展开全文
  • echarts-在vue中使用echarts

    千次阅读 2021-05-16 20:51:08
    在vue中使用echarts表格 Vue-Echarts V6 使用方式有两种: // 安装echarts npm i echarts@4.9.0 ///引入方式是import echarts from 'echarts' // 如果版本大于@5.0.0版本 就会引入方式为 const echarts = require('...
  • vue 中使用 echarts 的详细步骤

    千次阅读 2020-10-22 11:24:42
    年龄大了,果然脑力是跟不上了,这个图表已经用过几次了,每次还是或多或少的出现问题,现在把 echarts vue 的详细使用步骤记录下来,以备不时之需吧。 echarts 图表绘制的思路是: 1 获取一个有宽高的 DOM ...
  • vue使用echarts制作圆环图,代码如下所示: <div id=main></div> [removed] export default { //从父组件接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts:...
  • vue-echarts折线图
  • 一,Echarts 一个基于 JavaScript 的开源可视化图表库 Echarts官网 https://echarts.apache.org/zh/index.html 1.1 获取ECharts (1)从 npm 获取(项目获取) npm install echarts --save (2)从 CDN 获取 推荐...
  • vue2.0_在vue中使用echarts图表插件

    千次阅读 2022-02-15 10:33:35
    说明:本例子基于vue-cli脚手架搭建 首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的...main.js全局引入 //引入echarts import echarts from 'echarts' //vu
  • 如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一、在Vue使用ECharts地图功能二、生成地图数据1、安装Bigemap 程序2、生成需要的各乡镇地图数据3、http://geojson.io上导入数据...
  • 在Vue中使用echarts弹窗

    千次阅读 2022-02-19 10:18:22
    我的做法是index.vue文件写点击事件,然后调用子组件./components/ProgressDialog.vue,并且ProgressDialog渲染echart。结果发现打开弹窗,图表效果并没有加载出来。 原因: 点击事件一触发,就会更改弹窗...
  • 在Vue中使用ECharts,按时间实现动态折线图,动态柱状图的功能
  • 脚手架的依赖选项里面虚选择安装依赖,...项目导入Echarts并且根据官方文档添加Echarts的相关结构 如果导入了相关结构发现报错无显示等情况的话先卸载echarts依赖,安装指定的低版本的echarts试试看成功如下: ...
  • Vue中使用Echarts图表库实现数据可视化功能

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,769
精华内容 13,107
关键字:

在vue中使用echarts