<template> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" :style="{width: '600px',height:'400px'}"></div> </template> <script> let echarts = require("echarts/lib/echarts"); // 引入柱状图 require("echarts/lib/chart/bar"); require("echarts/lib/component/tooltip"); require("echarts/lib/component/title"); export default { name: 'HelloWorld', data () { return {} }, mounted(){ this.initCharts(); }, methods: { initCharts(){ this.chart = echarts.init(this.$el); this.setOptions(); }, setOptions(){ this.chart.setOption({ title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['4-5', '4-6', '4-7', '4-8', '4-9'] }, yAxis: { type: 'value', min:60, max:180 }, series: [ { name: '学', type: 'line', data: [160, 132, 101, 120, 140] }, { name: '习', type: 'line', data: [100, 102, 141, 154, 100] }, { name: '能', type: 'line', data: [150, 122, 101, 134, 90] } ] }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
官网小bug:https://blog.csdn.net/LTAO427/article/details/83050319