vue 中使用echarts

2022-12-01  本文已影响0人  简单tao的简单
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>
上一篇下一篇

猜你喜欢

热点阅读