vue中使用echarts

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

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

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

直接引入

    首先 npm install echarts  --save
   


     然后再main.js中全局引入

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

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

/**

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

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

*/
myCharts.js

需要先給echarts提供盒子的大小
import echarts from "echarts"
const install = function(Vue) {
Object.defineProperties(Vue.prototype, {
    
    $chart: {
        get() {
            return {
                //畫一條簡(jiǎn)單的線
                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

}

使用時(shí)：

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106701.html

相關(guān)文章

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

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

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

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

justCoding 2019-08-22 15:36 評(píng)論0 收藏0
記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐【更新】

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

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

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

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

摘要：在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲得更新后的如果不使用在切換的時(shí)候從無(wú)到有，該節(jié)點(diǎn)還沒加載，不能獲取，會(huì)報(bào)錯(cuò) 1.通過(guò)以下命令安裝echarts npm install echarts --save 2.在main.js文件里全局引入echarts import echarts from echartsVue.prototype.$echarts = echarts 3.單頁(yè)面引用ec...

leiyi 2019-08-02 15:19 評(píng)論0 收藏0