Shulou(Shulou.com)06/01 Report--

This article mainly explains "vue how to use echarts to achieve line chart", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue how to use echarts to achieve line chart" bar!

Effect picture:

Code:

Import echarts from 'echarts' / / npm install echarts@4.9.0export default {data () {return {option: {color: [' rgb (8, 252, 7)', 'rgb (255, 168, Japanese 0),], title: {text:''} Tooltip: {/ / prompt box trigger: 'axis',}, legend: {/ / the type of legend icon:'roundRect' / / Legend icon icon data: [{name: "last year" TextStyle: {color:'# fff'}}, {name: "this year" TextStyle: {color:'# fff'}},],} Grid: {left:'3%, right:'4%, bottom:'3%, top:'17%' Whether the containLabel: true / / grid area contains the scale label of the axis}, xAxis: {type: 'category', / / axis type. BoundaryGap: false, / / White space strategy on both sides of the axis data: [January, February, March, April, May, June, July, August, September, October, November, December] AxisLabel: {/ / related settings for axis scale labels interval:0, textStyle: {color:'# fff', fontSize: 10} }, axisLine: {/ / axis related settings show: true, lineStyle: {color:'rgb (2121253)'}} AxisTick: {/ / axis scale related settings. Show: false,}}, yAxis: {type: 'value', axisLabel: {/ / x axis coordinate text show: true TextStyle: {color:'# fff' / / text color},}, max:100 / / maximum 100 axisLine: {/ / axis axis related settings show: true, lineStyle: {color:'rgb (2121253)'}} AxisTick: {/ / axis scale related settings. Show: false,} SplitLine: {/ / the split line of coordinates in the grid area lineStyle: {/ / set the style of the split line (chart horizontal line color) color: ['# 153a8a']} Series: [{name: 'last year', type: 'line', data: [10 name, 20, 30, 50, 50, 50, 50, 60, 10, 60, 10, 30] LineStyle: {color:'rgb'/ / Line Color}}, {name: 'this year' Type: 'line', data: [20, 20, 30, 50, 50, 50, 10, 50, 50, 50, 50, 50, 50, 30] LineStyle: {color:'rgb (255 and 168) / / Color of the line}, created () {} Mounted () {this.mycharts ()}, methods: {mycharts () {let myChart = echarts.init (this.$refs.charts, "macarons") MyChart.setOption (this.option) / / Chart Adaptive window.addEventListener ("resize", function () {myChart.resize () / / myChart is instance object} .proCharts {width: 100%; height: 400px; background: rgb (14,51,129) Thank you for reading, the above is the content of "how vue uses echarts to achieve line chart". After the study of this article, I believe you have a deeper understanding of how vue uses echarts to achieve line chart, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.