美文网首页
vue 中使用echarts

vue 中使用echarts

作者: 简单tao的简单 | 来源:发表于2022-12-01 17:26 被阅读0次
yarn add echarts -S

<template>
  <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
 name: 'hello',
 data () {
  return {
  }
 },
 mounted(){
  this.drawLine();
 },
 methods: {
  drawLine(){
    // 基于准备好的dom,初始化echarts实例
    let myChart = echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
      title: { text: '在Vue中使用echarts' },
      tooltip: {},
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      },{
        name: '单价',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
  }
 }
}

</script>

相关文章

网友评论

      本文标题:vue 中使用echarts

      本文链接:https://www.haomeiwen.com/subject/jnzefdtx.html