npm install echarts --save

<template>
    <div id="main" style="width: 600px; height: 400px"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
        option: {
        xAxis: { //x轴设置
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: { //y轴设置
          type: 'value',
          axisLabel: { //y轴设置为%
            show: true,
            interval: 'auto',
            formatter: '{value} %',
          },
          max: 100,  //最大值
          min: 0,  //最小值
        },
        series: [
          {
            data: [100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: 'line',
            areaStyle: {},
          },
        ],
      },
   }
 },
  mounted() {
    let myChart = echarts.init(document.getElementById('main'))
    // 指定图表的配置项和数据
    let option = this.option
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
}

Logo

前往低代码交流专区

更多推荐