vue使用图表类2 柱形图表

来源:互联网 发布:软件销售企业财务处理 编辑:程序博客网 时间:2024/06/04 00:43
<template>    <div>      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>    </div></template><script>    export default {      data () {        return {          msg: ''        }      },      mounted () {        this.drawLine()      },      methods: {        drawLine () {          // 基于准备好的dom, 初始化echarts          let myChart = this.$echarts.init(document.getElementById('myChart'))          // 绘制图表          myChart.setOption({            title: {text: '图表信息'},            tooltip: {},            xAxis: {              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']            },            yAxis: {},            series: [{              name: '销量',              type: 'bar',              data: [5, 20, 36, 10, 10, 20]            }]          })        }      }    }</script><style></style>