vue中使用echarts

zoomdong 發(fā)布于2019-08-26 10:44 / 2572人閱讀

摘要：是開源的一個數(shù)據(jù)可視化的一個重要工具，運行流暢，并且是免費使用下面是我在中使用的一些方式直接引入首先然后再中全局引入但建議再引用時按需引入。當(dāng)然這只是最簡單的使用。

echarts是開源的一個數(shù)據(jù)可視化的一個重要工具，運行流暢，并且是免費使用！下面是我在vue-cli中使用的一些方式

直接引入

    首先 npm install echarts  --save
   


     然后再main.js中全局引入

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

        Vue.use(myCharts)
   **但建議再引用時按需引入。但方便學(xué)習(xí)沒有使用**

/**

各種畫echarts圖表的方法都封裝在這里

注意：這里echarts沒有采用按需引入的方式，只是為了方便學(xué)習(xí)

*/
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

}

使用時：

當(dāng)然這只是最簡單的使用。需要一點點的積累。關(guān)鍵在于細(xì)心參考官方文檔。echarts配置項

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106701.html

相關(guān)文章

vue文件中使用echarts.js的兩種方式

最近工作中需要用到echarts，由于項目是用的vue-cli開發(fā)的。在網(wǎng)上搜到vue中合成了vue-echarts，但是不想使用vue中規(guī)定好的數(shù)據(jù)格式，于是就自己做了一個vue項目引用原生echarts的簡單demo，實現(xiàn)過程如下：用了兩種實現(xiàn)方式準(zhǔn)備工作 1、安裝echarts依賴控制臺輸入：npm install echarts --save 2、全局引入 main.js中引入 im...

陳江龍 2019-08-23 12:24 評論0 收藏0
手拉手，用Vue開發(fā)動態(tài)刷新Echarts組件

摘要：靜態(tài)組件開發(fā)因為被編程思想這篇文章毒害太深，所以筆者開發(fā)組件也習(xí)慣從基礎(chǔ)到高級逐步迭代。靜態(tài)組件要實現(xiàn)的目的很簡單，就是把圖表，渲染到頁面上。實現(xiàn)動態(tài)刷新下一步我想大家都知道了，就是定時從后臺拉取數(shù)據(jù)，然后更新父組件的就好。從幾年前流行的jQuery插件，到現(xiàn)在React和Vue的組件，在業(yè)務(wù)需求的開發(fā)中抽象通用出通用的模塊，一直都是一個對個人技術(shù)提高非常有幫助的事情。本文從一個真實...

justCoding 2019-08-22 15:36 評論0 收藏0
記一次vue-webpack項目優(yōu)化實踐【更新】

摘要：優(yōu)化空間不大主要關(guān)注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優(yōu)化空間較小。當(dāng)然，從整體優(yōu)化的大維度上來說優(yōu)化的點還有很多，這個文章繼續(xù)更新下去。項目現(xiàn)狀項目是一個數(shù)據(jù)監(jiān)測平臺，引入了ehcart和three.js 負(fù)責(zé)項目的數(shù)據(jù)可視化；打包后，體積高達(dá)2.1M，這個體積相比于我的項目規(guī)模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
Vue 2.x 實戰(zhàn)之后臺管理系統(tǒng)開發(fā)（一）

摘要：導(dǎo)語下文實戰(zhàn)之后臺管理系統(tǒng)開發(fā)二該文章將從頭到尾梳理我是如何使用開發(fā)一個后臺管理項目的，我會將自己遇到的問題貼出，希望可以幫助到其他人。構(gòu)建項目框架準(zhǔn)備對于大陸用戶，建議將的注冊表源設(shè)置為國內(nèi)的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導(dǎo)語下文：Vue 2.x 實戰(zhàn)之后臺管理系統(tǒng)開發(fā)（二）該文章將從頭到尾梳理我是如何使用 Vue 2 開發(fā)一個后臺管理項目的，我會將自己遇到的問...

darkbaby123 2019-08-20 16:49 評論0 收藏0
vue中引入echarts渲染問題

摘要：在修改數(shù)據(jù)之后立即使用這個方法，獲得更新后的如果不使用在切換的時候從無到有，該節(jié)點還沒加載，不能獲取，會報錯 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