1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| <template> <div> <div id="main" class="main_container"></div> </div> </template>
<script> export default { name: 'VueAppApp', mounted() { this.initCharts() }, methods: { initCharts(){ let myChart = this.$echarts.init(document.getElementById("main")) myChart.setOption({ title: { text: "ECharts 入门示例", }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [{ name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }] }) } } }; </script>
<style lang="css" scoped> .main_container { width: 100%; height: 500px; overflow: hidden; } </style>
|