<fieldset id="zdtx7"></fieldset>

vue中使用echarts

zoomdong 發布于2019-08-26 10:44 / 2563人閱讀

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

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配置項

GPU云服務器云服務器 vue 中使用 webrtc vue中使用webrtc vue中 vue使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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