One:
<template> <Layout> <Content> <Card :style="{minHeight:'300px'}"> <div id="myChart"></div> </Card> </Content> </Layout> </template> <script> export default { mounted () { // 调用绘制图表的方法 this.draw(); }, methods: { draw () { // 实例化echarts对象 let myChartDrawer = this.$echarts.init(document.getElementById('myChart' var option =Draw a bar graph//)) { Title: { text: 'point area, checking the progress of the device' , Top: . 5 , left: 'Center' }, Legend: { Data: [ 'clothes', 'caps' ], Top: 30 }, // X- axis XAXIS: { Data: [ 'month', 'February', 'March "," April ",' May ' ] }, // the Y axis YAXIS: {}, // Data Series: [ { name: 'clothes' , type: ' bar ' , Data: [ 120, 100, 440., 320., 150 ] }, { name: ' hat ' , type: ' bar ' , Data: [ 200 is, 120, 240, 330., 170. ] } / * { name: 'bar', type: 'line', data: [120, 200, 240, 260, 300] }, { name: 'bar', type: 'line', data: [120, 200, 300, 140, 260] }*/ ] }; myChartDrawer.setOption(option); } } } </script> <style scoped> #myChart { width: 70%; me-height: 300px; clear: both; box-sizing: border-box; margin: 30px auto; } </style>
Here,
this. $ echarts is because I have been introduced globally in other places. Here replaced by your own way can be introduced.