Install echarts

npm install echarts -S
Copy the code

2.1 In main.js, introduced (global)

Prototype.$echarts = echarts.$echarts = echartsCopy the code

2.2 In. Vue any page, such as: index.vue DOM code

<div class="my-charts" ref="myChart"></div>
Copy the code

JS code

export default { data() { return {}; }, mounted() { this.drawLine(); }, methods: {drawLine() {let myChart = this.$echarts.init(this.$refs.mychart); Mychart. setOption({title: {text: "", left: "5%"}, tooltip: {trigger: "axis"}, legend: {data: [" turn ", "reported to the quantity"], right: "5%"}, the grid: {left: "5%", right: "6%", the bottom: "10%", containLabel: true}, xAxis: {type: "category", boundaryGap: false, data: ["08-12", "08-13", "08-14", "08-15", "08-16", "08-17", "08-18"], axisLine: LineStyle: {color: "#999", width: 0.1}, splitLine: {show: true, lineStyle: {color: "#999", width: 0.1}}}, yAxis: {type: "value", axisLine: {lineStyle: {color: "#999", width: 0.1}}}, series: [{name: {color: "RGB (237,252,245)"}, smooth: [5, 20, 36, 10, 10, 20, 0] True, itemStyle: {normal: {color: "#53e59d"}}, {name: "itemtype ", type: "line", data: [15, 0, 36, 10, 10, 0, 0], areaStyle: {color: "RGB (220,247,245)"}, smooth: true, itemStyle: {normal: {color: RGB (50, 50, 50)) "#43c4fd" } } } ] }); }}}; </script>Copy the code

Iii. The effect picture is as follows: