echarts使用入门

导入echarts库

import * as echarts  from "echarts";

ui

<div id="manuChart" class="chart-div"></div>

vue中的代码

操作dom的代码尽量放在window.onload中。
该横向柱状图可以实现鼠标上下滑动操作，并且禁止了放大缩小的功能。

createdManuChart() {
    window.onload = () => {
      const manuChart = echarts.init(document.getElementById('manuChart'));
      const option = {
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: 'value',
          min: 0,
          max:100,
          axisLabel : {
            show : false
          },
          splitLine : {
            show : false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick : {
            show : false
          },
          axisLine:{
            show : false
          },
          data: ["四川中烟","云南中烟","湖北中烟","海外","上海中烟","江苏中烟","重庆中烟","安徽中烟","贵州中烟",
            "湖南中烟","浙江中烟","河北中烟","广西中烟","中烟实业","河南中烟","广东中烟","未知",]
        },
        series: [{
          name: '销量',
          type: 'bar',
          barWidth:40,
          data: [17,14,12,10,8,5,5,5,3,3,3,2,2,2,1,1,1,1],
          label: {
            show: true,
            formatter: '{c}%', //显示数据带上百分比
            position: 'right'
          }
        }],
        grid: {
          x: '10%',
          y: 0,
          x2: '10%',
          y2: 0
        },
        dataZoom: {
          yAxisIndex: [0],
          type:'inside',
          start: 0,
          end: 30,
          zoomLock:true,
        }
      };
      manuChart.setOption(option);
    }

效果图