2. 程式人生 > >在 Vue 專案中使用 ECharts

在 Vue 專案中使用 ECharts

阿新 • • 發佈：2019-02-03
import { mapActions, mapState } from 'vuex'; // 引入當前圖表配置需要用到的圖表、元件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'echarts/lib/component/grid'; import 'echarts/lib/component/legend'; import 'echarts/lib/chart/radar'; import 'echarts/map/js/china'; import Chart from '../components/Charts/index'
; const colors = [ '#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a' ]; export default { name: 'echarts-radar', data() { return { renderer: 'canvas' }; }, computed: { ...mapState('charts'
, { currentData: 'radar' }), provinces() { const currentData = this.currentData || []; return currentData.map(data => data.province); }, // option 合併傳入的資料，返回一個 echarts 的 配置項 option() { return { backgroundColor: '#161627', title: { text: 'AQI - 雷達圖'
, left: 'center', textStyle: { color: '#eee' } }, legend: { bottom: 5, data: this.provinces, itemGap: 20, textStyle: { color: '#fff', fontSize: 14 }, selectedMode: 'single' }, radar: { indicator: [ // 雷達圖指示器 { name: 'AQI', max: 200 }, { name: 'PM2.5', max: 250 }, { name: 'PM10', max: 250 }, { name: 'CO', max: 5 }, { name: 'NO2', max: 150 }, { name: 'SO2', max: 120 } ], shape: 'circle', // 形狀 splitNumber: 5, // 分割段數 splitLine: { // 分隔線 lineStyle: { color: [ 'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)', 'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)', 'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)' ].reverse() } }, splitArea: { // 分割區域 show: false }, axisLine: { // 座標軸軸線 lineStyle: { color: 'rgba(238, 197, 102, 0.5)' } } }, series: this.provinces.map((province, idx) => { return { name: province, type: 'radar', lineStyle: { width: 1, opacity: 0.5 }, data: this.currentData[idx].data, symbol: 'none', itemStyle: { color: colors[idx % colors.length] }, areaStyle: { opacity: 0.05 } }; }) }; } }, methods: { ...mapActions('charts', ['changeData']) }, // 元件裝載前請求資料 async beforeMount() { const path = '/radar'; const key = 'radar'; await this.changeData({ path, key }); }, components: { Chart } };

相關推薦

vue專案中使用Echarts 動態更改圖表資料 ， Vue 折線圖、柱狀圖等圖表動態重新整理 ，

問題：在vue元件中，用echarts外掛 動態獲取、修改圖表資料 解決：已解決！ 第一步：開啟cmd命令視窗 安裝echarts依賴 安裝：npm install echarts -S 第二步：在main.js中全域性引入   //引入echarts的圖表外掛

vue 專案中使用echarts起步

在元件<mychart.vue>中： <template> <div> <div ref="mychart"></div> </div> </template> <script> exp

vue專案中使用echarts

該示例使用 vue-cli 腳手架搭建 安裝echarts依賴 npm install echarts -S 1 或者使用國內的淘寶映象： 安裝 npm install -g cnpm --registry=https://registry.npm.taobao.org

VUE 爬坑之旅 -- 在 VUE 專案中使用 ECharts 畫 K 線圖和麵積圖，並且可切換

現在的專案中需要做一個K線圖的功能，花了幾天時間查資料，讀文件，總算是基本搞定了，下面把這過程中一些需要注意的點記下來，以備不時之需。需要達到的效果如下： 說到做圖表，現在的成熟的解決方案就是百度的 ECharts 了，功能強大齊全，文件詳細，用的人多

vue專案中使用echarts 遇到問題總結2

一：echarts圖形的父級容器寬度設定為百分比形式，導致echarts變形；12解決方案：固定寬度沒問題，只要設定成百分比，有的好用，有的不好用，只能將寬高設定為rem,好在相差不大；二：vue-cli專案下使用 vue的tab切換3個不同的echarts圖表，未打包正常顯

vue專案中使用echarts圖表

在後臺管理系統中，圖表是一個很普遍的元素。目前常用的圖示外掛有 charts,  Echarts, highcharts。這次將介紹 Echarts 在 Vue 專案中的應用。 一、安裝外掛 使用 cnpm 安裝 Echarts cnpm install echarts -S 和之前介紹的 axios

在Vue專案中如何使用其他外掛（eCharts & wangeditor）

使用 echartys 1.使用其他外掛 ，直接npm安裝即可： npm install echarts -S //安裝echarts依賴 2.建立圖表，在 main.js 全域性引入

vue專案中使用echarts 遇到問題總結

需要注意echarts版本不同，部分屬性可能有所不同，我用的是echarts4.0. 一、echarts圖表自適應問題。 自適應程式碼 (function (doc, win) {     var docEl = doc.documentElement,         r

Vue專案中引入Echarts

在Vue專案中使用Echats，可以極大程度的方便完成很多Canvas功能。1. 安裝Echatsnpm install echarts --save2.專案main.js中引入Echarts// 引入Echarts import Echarts from 'echarts'

vue專案中引用echarts的幾種方式

準備工作： 首先我們初始化一個vue專案，執行vue init webpack echart,接著我們進入初始化的專案下。安裝echarts， npm install echarts -S //或 cnpm install echarts -S 安裝完成之後，我們就可

在 Vue 專案中使用 ECharts

import { mapActions, mapState } from 'vuex'; // 引入當前圖表配置需要用到的圖表、元件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'e

Vue系列——在vue專案中使用echarts

該示例使用 vue-cli 腳手架搭建 安裝echarts依賴 npm install echarts -S1 或者使用國內的淘寶映象： 安裝npm install -g cnpm --registry=https://registry.npm.taobao.org1使

關於在 vue專案中對echarts圖表的一些控制（及陣列物件去重）

1.利用replace對後臺返回的json資料做替換處理 (不管是多麼複雜的資料結構，都可以利用這樣的方法去全部匹配) var json = [{'real-name':'lolo'},{'real-name':'abc'},{'real-name':'

在vue專案中封裝echarts的正確姿勢

為什麼需要封裝echarts 每個開發者在製作圖表時都需要從頭到尾書寫一遍完整的option配置，十分冗餘 在同一個專案中，各類圖表設計十分相似，甚至是相同，沒必要一直做重複工作 可能有一些開發者忘記考慮echarts更新資料的特性，以及視窗縮放時的適應問題。這樣導致資料更新了echarts檢視卻沒有更新，

vue專案中禁止移動端雙擊放大，雙手拉大放大的方法

在vue打包後生成的dist目錄檔案下下面有index.html 開啟裡面 把原來的這個 <meta name=viewport content="width=device-width,initial-scale=1"> 　　 替換成這個就行了 <meta cont

解決關於 vue專案中 點選按鈕路由多了個問號

問題描述： 在vue專案開發過程中，點選按鈕結果頁面重新整理了一遍 後來發現路徑變成了 localhost:8080/?#/login   原因： 這裡是 form 表單，點選了button 按鈕，觸發了他的預設事件，就是觸發了提交這個行為。   解決方案 使用@click

把圖片公式轉化為文字內容。vue專案中引入MathJax.js

這是個圖片的公式，有img標籤引入。 我們想要轉成下面的效果：   在vue專案中引入MathJax.js 首先在index.html頁面  <script type="text/javascript" src="https://cdn.ma

vue專案中 讓頁面的title顯示的是對應的路由

】 這個頁面我看的是資源中心的頁面。如果什麼也不設定你看到的就是一個網址的連結在title的位置。 我想讓他看到對應的路由就當前而言就是資源中心幾個字替換那上面的網址。 你只需要在main.js裡面新增下面。 router.beforeEach((to, from, next) =&

vue專案中webpack配置代理，解決跨域問題

在config資料夾中的index.js檔案配置 主要是這句話 proxyTable: { //本地測試介面 '/': { target: 'http://xx.xx.xx.xx', changeOrigin: true, sec

vue專案中的一些問題

1、切換路由時根路由一直處於被啟用狀態 　　解決辦法： 加exact屬性  <router-link to="/home" exact>首頁</router-link> 　如果需要進去首頁預設選中home，需要配置路由重定向 { path: