Shulou(Shulou.com)05/31 Report--

This article Xiaobian for you to introduce in detail "how to achieve vue+antv line chart", the content is detailed, the steps are clear, the details are handled properly, I hope this "vue+antv how to achieve line chart" article can help you solve your doubts, following the editor's ideas slowly in-depth, let's learn new knowledge.

G2 Chart of vue Ali-antv+ Line Chart

The chart used before is echarts+highcharts 's two commonly used charts, but now I also use Ali's G2 chart because of the need for the project and other reasons. The effect is quite good. Share it here.

Official website entrance

Realize the effect

Implementation steps

First: install the plug-in

Npm install @ antv/g2-- save

Second: lineCharts.vue, note that the data of this type of chart must be assigned by mouned once, and watch monitors that the data is changed once, because the bound data is passed here and the chart is not loaded at the same time.

Import G2 from'@ antv/g2'export default {data () {return {chart: null}}, props: {charData: {type: Array, default: function () {return {data: []}, id: String} / / if you use the static data passed by serverData, please use the mounted () method and comment out watch mounted () {this.drawChart ()}, / / listen for the data sent from the API API using watch / / watch: {/ / charData: function (val, oldVal) {/ / listen for charData When a change occurs, trigger this callback function to draw the chart / / console.log ('new:% s, old:% slots, val, oldVal) / / this.drawChart (val) / /} methods: {drawChart () {/ / 2019.03.30 updated destory method has been deprecated / / 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 ()}} .gathers {width:100% Height:100%;}

Third: the calling part

Import lineCharts from'@ / components/gcharts/lineCharts'//g2 drawing components: {lineCharts,}, data () {return {lineData: [{year:'10 year 21, value: 40} {year: '10Universe 22nd, value: 30.5}, {year:' 10Compare 23mm, value: 50}, {year: '10Universe 24mm, value: 40.9} {year: '10Accord 2500, value: 60}, {year:' 10Compare 2600, value: 70}, {year: '10Accord 2700, value: 90} {year:'10 Compact 28 charts, value: 63}]}} antv G2 bar chart is mixed with line chart

This is the data data: [{time: '9:00-10 value: 30, type:' exposure', rate: 100}, {time: '10:00-11 type', value: 90, type: 'exposure', rate: 200}, {time: '11:00-12 Switzerland, value: 50, type:' clicks', rate: 300}, {time: '12:00-13 type, value: 30) Type: 'clicks', rate: 400}, {time: '13:00-14 value: 70, type:' clicks', rate: 500}], this is the component import {Chart} from'@ antv/g2' Export default {name: 'Name', / / Pascal name 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: 'sales (ten thousand)', nice: true,}, rate: {alias:'Li Daxuan (hundred)', nice: true,},}) Chart.axis ('rate', {title: {top:' 0mm, style: {fill: 'green',}) Chart.axis ('value', {title: {top:' 0mm, style: {fill: 'green',}); chart.tooltip ({showCrosshairs: true, / / Show Tooltip guides showMarkers: false, shared: true,}) Chart.interaction ('element-active') Chart.legend ({position: 'top', items: [{name:' exposure', value: 'exposure', marker: {symbol: 'square', style: {fill:' # 1890FFF, r: 5}, {name: 'clicks', value: 'clicks', 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 lineWidth 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 ();}},} Read here, this "how to achieve vue+antv line chart" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.