vue中使用echarts

zoomdong 发布于2019-08-26 10:44 / 2562人阅读

摘要：是开源的一个数据可视化的一个重要工具，运行流畅，并且是免费使用下面是我在中使用的一些方式直接引入首先然后再中全局引入但建议再引用时按需引入。当然这只是最简单的使用。

echarts是开源的一个数据可视化的一个重要工具，运行流畅，并且是免费使用！下面是我在vue-cli中使用的一些方式

直接引入

    首先 npm install echarts  --save
   


     然后再main.js中全局引入

import Mycharts from "../../sss"

        Vue.use(myCharts)
   **但建议再引用时按需引入。但方便学习没有使用**

/**

各种画echarts图表的方法都封装在这里

注意：这里echarts没有采用按需引入的方式，只是为了方便学习

*/
myCharts.js

需要先给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"
                        }]
                    };

                    this.chart.setOption(optionData);
                },
            }
        }
    }
})
export default {
install

}

使用时：

当然这只是最简单的使用。需要一点点的积累。关键在于细心参考官方文档。echarts配置项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106701.html

vue文件中使用echarts.js的两种方式

最近工作中需要用到echarts，由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts，但是不想使用vue中规定好的数据格式，于是就自己做了一个vue项目引用原生echarts的简单demo，实现过程如下：用了两种实现方式准备工作 1、安装echarts依赖控制台输入：npm install echarts --save 2、全局引入 main.js中引入 im...

陈江龙 2019-08-23 12:24 评论0 收藏0
手拉手，用Vue开发动态刷新Echarts组件

摘要：静态组件开发因为被编程思想这篇文章毒害太深，所以笔者开发组件也习惯从基础到高级逐步迭代。静态组件要实现的目的很简单，就是把图表，渲染到页面上。实现动态刷新下一步我想大家都知道了，就是定时从后台拉取数据，然后更新父组件的就好。从几年前流行的jQuery插件，到现在React和Vue的组件，在业务需求的开发中抽象通用出通用的模块，一直都是一个对个人技术提高非常有帮助的事情。本文从一个真实...

justCoding 2019-08-22 15:36 评论0 收藏0
记一次vue-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
Vue 2.x 实战之后台管理系统开发（一）

摘要：导语下文实战之后台管理系统开发二该文章将从头到尾梳理我是如何使用开发一个后台管理项目的，我会将自己遇到的问题贴出，希望可以帮助到其他人。构建项目框架准备对于大陆用户，建议将的注册表源设置为国内的镜像，如淘宝镜像，可以大幅提升安装速度。 1. 导语下文：Vue 2.x 实战之后台管理系统开发（二）该文章将从头到尾梳理我是如何使用 Vue 2 开发一个后台管理项目的，我会将自己遇到的问...

darkbaby123 2019-08-20 16:49 评论0 收藏0
vue中引入echarts渲染问题

摘要：在修改数据之后立即使用这个方法，获得更新后的如果不使用在切换的时候从无到有，该节点还没加载，不能获取，会报错 1.通过以下命令安装echarts npm install echarts --save 2.在main.js文件里全局引入echarts import echarts from echartsVue.prototype.$echarts = echarts 3.单页面引用ec...

leiyi 2019-08-02 15:19 评论0 收藏0