Create a project with VUE, introduce ECharts, and write a basic line chart to code directly

<template> <div id="main" style="width: 60%; height:500px;" ref="main"> </div> </template> <script> import * as echarts from "echarts"; export default { name: 'HelloWorld', mounted() { this.test() }, methods: Var myChart = echarts.init(document.getelementbyId ('main')); var myChart = echarts.init(document.getelementbyId ('main')); const myChart = echarts.init(this.$refs.main); // const time = (function () {let now = new Date(); // Get the current time let res = []; // Let len = 5; // How much time do I need to save? while (len--) { res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); // Now = new Date(+now - 2000) // Now = new Date(+now - 2000) } return res; }) (); Const dataOne = [11,4,7,8,13] const dataTwo = [9,7,7,13,15] 'Dynamic ', textStyle: {color: 'black'}}, Tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: { backgroundColor: '#283b56' } } }, legend: {}, xAxis: { type: 'category', data: BoundaryGap: true}, yAxis: {type: 'value'}, series: [{data: dataOne, type: 'line', name: 'test 1 ', markPoint: {data: [{type:' Max ', name: 'Max'}, {type: 'min', name: 'min'}]}, markPoint: {data: [{type: 'Max ', name: 'min'}]}, markLine: {data: [{type: 'average', name: 'average'}]}}, {data: dataTwo, name: 'test 2 ', type: 'line', markPoint: {data: [{type: 'average', name: 'average'}]}}, {data: dataTwo, name:' test 2 ', type: 'line', markPoint: {data: [{type: 'Max' name: 'maximum}, {type: "min", name:' minimum '}]}, markLine: {data: [{type: 'business' name: </script> <style scoped lang=" SCSS "> </style>Copy the code

But this is static, move, keep changing the X axis in the timer, and test one, test two data, code

<template> <div id="main" style="width: 100%; height:600px;" ref="main"> </div> </template> <script> import * as echarts from "echarts"; // import axios from "axios"; export default { name: 'homePage', mounted() { this.test() }, methods: Var myChart = echarts.init(document.getelementbyId ('main')); var myChart = echarts.init(document.getelementbyId ('main')); const myChart = echarts.init(this.$refs.main); // const time = (function () {let now = new Date(); // Get the current time let res = []; // Let len = 5; // How much time do I need to save? while (len--) { res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); // Now = new Date(+now - 2000) // Now = new Date(+now - 2000) } return res; }) (); Const dataOne = (function () {// 5 random numbers, let res = []; let len = 5; while (len--) { res.push(Math.round(Math.random() * 1000)); } return res; }) (); Const dataTwo = (function () {// 5 random numbers let res = []; let len = 5; while (len--) { res.push(Math.round(Math.random() * 1000)); } return res; }) (); Let options = {title: {text: 'dynamic ', textStyle: {color: 'black'}}, tooltip: {trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } } }, legend: {}, xAxis: { type: 'category', data: time, // Add groups of time to boundaryGap: true}, yAxis: {type: 'value'}, series: [{data: DataOne, type: 'line', name: 'test one ', markPoint: {data: [{type:' Max ', name: 'Max'}, {type: 'min', name: 'minimum value'}]}, markLine: {data: [{type: 'average', name: 'average'}]}}, {data: dataTwo, name: 'test 2 ', type: 'the line' markPoint: {data: [{type: 'Max' name: 'maximum}, {type: "min", name:' minimum '}]}, markLine: {data: [{type: 'average', name: SetInterval (function () {let nowTime = new Date().tolocaletimeString ().replace(/^\D*/, ''); time.shift() time.push(nowTime) dataOne.shift() dataOne.push(Math.round(Math.random() * 1000)) dataTwo.shift() Datatwo.push (math.round (math.random () * 1000)) console.log(dataOne) // Axios.get (' your URL ').then(res => {// console.log(res) //}) mychart.setoption ({xAxis: [{data: time}], series: [ { data: dataOne }, { data: dataTwo } ] }) }, 2000) myChart.setOption(options) } } } </script> <style scoped lang="scss"> </style>Copy the code

For the bar chart, you only need to change the line in series to BAR. But if you look at the official document, you will find Toolbox. You can directly search and view the details, and add them in our Options

Let options = {title: {text: 'dynamic ', textStyle: {color: 'black'}}, Tooltip: {trigger: 'axis', axisPointer: {type: 'cross' label: {backgroundColor: '# 283 b56'}}}, legend: {}, / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- I'm here!!!!!! toolbox: { show: true, feature: { dataView: { readOnly: false }, magicType: { type: ['bar', 'line','stack'] }, restore: {}, saveAsImage: {} } }, // -------------------------------- xAxis: { type: 'category', data: BoundaryGap: true}, yAxis: {type: 'value'}, series: [{data: dataOne, type: 'line', name: 'test 1 ', markPoint: {data: [{type:' Max ', name: 'Max'}, {type: 'min', name: 'min'}]}, markPoint: {data: [{type: 'Max ', name: 'min'}]}, markLine: {data: [{type: 'average', name: 'average'}]}}, {data: dataTwo, name: 'test 2 ', type: 'line', markPoint: {data: [{type: 'average', name: 'average'}]}}, {data: dataTwo, name:' test 2 ', type: 'line', markPoint: {data: [{type: 'Max' name: 'maximum}, {type: "min", name:' minimum '}]}, markLine: {data: [{type: 'business' name: 'Average'}]}}]}Copy the code