vue+阿里的G2圖表-antv+折線圖實(shí)例
vue阿里的G2圖表-antv+折線圖
之前使用的圖表是echarts+highcharts兩個(gè)常用圖表的,現(xiàn)在的話因?yàn)轫?xiàng)目需要和別的原因也接觸使用了阿里的g2圖表,感覺效果還是挺好的,在這里分享下
實(shí)現(xiàn)效果
實(shí)現(xiàn)步驟
第一:安裝插件
npm install @antv/g2 --save
第二:lineCharts.vue,注意,圖表這類型的數(shù)據(jù)必須mouned賦值一次,watch監(jiān)聽到數(shù)據(jù)改變在賦值一次,因?yàn)檫@里綁定的數(shù)據(jù)傳過來后并不會同時(shí)加載圖表
<template> ? <div class="gcharts" :id="id"></div> </template>
<script> import G2 from '@antv/g2' export default { ? data () { ? ? return { ? ? ? chart: null ? ? } ? }, ? props: { ? ? charData: { ? ? ? type: Array, ? ? ? default: function () { ? ? ? ? return { ? ? ? ? ? data: [] ? ? ? ? } ? ? ? } ? ? }, ? ? id: String ? }, ? // 如果使用serverData傳過來的靜態(tài)數(shù)據(jù) 請使用mounted()方法 并注釋掉watch ? mounted () { ? ? this.drawChart() ? }, ? // 監(jiān)聽API接口傳過來的數(shù)據(jù) 使用watch ? // watch: { ? ? ? // charData: function (val, oldVal) { ? ?// 監(jiān)聽charData,當(dāng)發(fā)生變化時(shí),觸發(fā)這個(gè)回調(diào)函數(shù)繪制圖表 ? ? ? // console.log('new: %s, old: %s', val, oldVal); ? ? ? // this.drawChart(val); ? ? // } ? methods: { ? ? drawChart() { ? ? ? // 2019.03.30 更新 destory方法已被廢棄 ? ? ? // this.chart && this.chart.destory() ? ? ? this.chart = new G2.Chart({ ? ? ? ? container: this.id, ? ? ? ? width: 1550, ? ? ? ? height: 425 ? ? ? }) ? ? ? this.chart.source(this.charData) ? ? ? this.chart.scale('value', { ? ? ? ? min: 0 ? ? ? }) ? ? ? this.chart.scale('year', { ? ? ? ? range: [0, 1] ? ? ? }) ? ? ? this.chart.tooltip({ ? ? ? ? crosshairs: { ? ? ? ? ? type: 'line' ? ? ? ? } ? ? ? }) ? ? ? this.chart.line().position('year*value') ? ? ? this.chart.point().position('year*value').size(4).shape('circle').style({ ? ? ? ? stroke: '#fff', ? ? ? ? lineWidth: 1 ? ? ? }) ? ? ? this.chart.render() ? ? } ? } } </script>
<style lang='less' scope> ? .gcharts{ ? ? width:100%; ? ? height:100%; ? } </style>
第三:調(diào)用部分
<lineCharts :charData="lineData" :id="'chart1'"></lineCharts>
import lineCharts from '@/components/gcharts/lineCharts'//g2繪圖 components: { lineCharts, }, data () { return { lineData:[ {year: '10/20', value: 30 }, { year: '10/21', value: 40 }, { year: '10/22', value: 30.5 }, { year: '10/23', value: 50 }, { year: '10/24', value: 40.9 }, { year: '10/25', value: 60 }, { year: '10/26', value: 70 }, { year: '10/27', value: 90 }, { year: '10/28', value: 63 }] }}
antv g2柱狀圖與折線圖混合使用
這是數(shù)據(jù)
data: [ ?{ time: '9:00-10:00', value: 30 , type: '曝光量', rate: 100 }, ? ?{ time: '10:00-11:00', value: 90, type: '曝光量', rate: 200 }, ? ?{ time: '11:00-12:00', value: 50, type: '點(diǎn)擊量', rate: 300 }, ? ?{ time: '12:00-13:00', value: 30, type: '點(diǎn)擊量', rate: 400 }, ? ?{ time: '13:00-14:00', value: 70, type: '點(diǎn)擊量', rate: 500 } ?],
這是組件
<template> ? <div class="page"> ? ? <div :id="id"></div> ? </div> </template>
<script type="text/ecmascript-6"> import { Chart } from '@antv/g2'; export default { ? name: 'Name', // Pascal命名 ? components: {}, ? props: { ? ? id: { ? ? ? type: String, ? ? ? default: 'chart' ? ? }, ? ? height: { ? ? ? type: Number, ? ? ? default: 500 ? ? }, ? ? chartWidth: { ? ? ? type: Number, ? ? }, ? ? chartData: { ? ? ? type: Array, ? ? ? default: () => {} ? ? }, ? }, ? data() { ? ? return {}; ? }, ? computed: {}, ? watch: {}, ? filters: {}, ? beforeCreate() {}, ? created() {}, ? mounted() { ? ? this.initPage(); ? }, ? methods: { ? ? initPage() {}, ? ? drawChart() { ? ? ? const _this = this; ? ? ? const chart = new Chart({ ? ? ? ? container: _this.id, ? ? ? ? autoFit: true, ? ? ? ? height: _this.height, ? ? ? ? width: _this.chartWidth ? ? ? }); ? ? ? chart.data(_this.chartData); ? ? ? chart.scale({ ? ? ? ? value: { ? ? ? ? ? alias: '銷售額(萬)', ? ? ? ? ? nice: true, ? ? ? ? }, ? ? ? ? rate: { ? ? ? ? ? alias: '李大玄(百)', ? ? ? ? ? nice: true, ? ? ? ? }, ? ? ? }); ? ? ? chart.axis('rate', { ? ? ? ? title: { ? ? ? ? ? top: '0', ? ? ? ? ? style: { ? ? ? ? ? ? fill: 'green', ? ? ? ? ? }, ? ? ? ? }, ? ? ? }); ? ? ? chart.axis('value', { ? ? ? ? title: { ? ? ? ? ? top: '0', ? ? ? ? ? style: { ? ? ? ? ? ? fill: 'green', ? ? ? ? ? }, ? ? ? ? }, ? ? ? }); ? ? ?? ? ? ? chart.tooltip({ ? ? ? ? showCrosshairs: true, // 展示 Tooltip 輔助線 ? ? ? ? showMarkers: false, ? ? ? ? shared: true, ? ? ? }); ? ? ? chart.interaction('element-active'); ? ? ? chart.legend({ ? ? ? ? position: 'top', ? ? ? ? items: [ ? ? ? ? ? { name: '曝光量', value: '曝光量', marker: { symbol: 'square', style: { fill: '#1890FF', r: 5 } } }, ? ? ? ? ? { name: '點(diǎn)擊量', value: '點(diǎn)擊量', marker: { symbol: 'square', style: { fill: '#8c8c8c', r: 5 } } }, ? ? ? ? ], ? ? ? }); ? ? ?? ? ? ? chart ? ? ? ? .interval() ? ? ? ? .adjust('stack') ? ? ? ? .color('type', ['red', 'pink']) ? ? ? ? .position('time*value') ? ? ? ? .style('time', val => { ? ? ? ? ? if (val === '13:00-14:00') { ? ? ? ? ? ? return { ? ? ? ? ? ? ? fillOpacity: 0.4, ? ? ? ? ? ? ? lineWidth: 1, ? ? ? ? ? ? ? stroke: '#636363', ? ? ? ? ? ? ? lineDash: [3, 2] ? ? ? ? ? ? }; ? ? ? ? ? } ? ? ? ? ? return { ? ? ? ? ? ? fillOpacity: 1, ? ? ? ? ? ? lineWidth: 0, ? ? ? ? ? ? stroke: '#636363', ? ? ? ? ? ? lineDash: [100, 0.5] ? ? ? ? ? }; ? ? ? ? }); ? ? ? chart.line().position('time*rate').label('rate'); ? ? ? chart.point().position('time*rate'); ? ? ? // chart.interval().position('genre*sold'); ? ? ? // chart.intervalDodge().position('date*value').color('type'); ? ? ? chart.render(); ? ? } ? }, }; </script>
<style lang="scss" scoped> </style>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解使用mpvue開發(fā)github小程序總結(jié)
這篇文章主要介紹了詳解使用mpvue開發(fā)github小程序總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個(gè)使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web(響應(yīng)式)、以及各種小程序(微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶)、快應(yīng)用等多個(gè)平臺2022-09-09vue中為什么在組件內(nèi)部data是一個(gè)函數(shù)而不是一個(gè)對象
這篇文章主要介紹了vue中為什么在組件內(nèi)部data是一個(gè)函數(shù)而不是一個(gè)對象,本文通過示例代碼給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09