vue: 安装echarts并引用

1.npm intall echarts@4.9

2在页面引用：

import * as echarts from "echarts";复制

3.Dom中ref

<div class="ui-chart" ref="chart2"></div>复制

4.图表部分：

methods:{
    chart2(){
      var that = this
      that.$nextTick(() => {
        let myChart2 = echarts.init(that.$refs.chart2);
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          formatter: '{b0}<br>{a0}: {c0}',
        },
        // animation: true,
        grid: {
          bottom: '10%',
          right: '3%',
          left: '3%',
        },
        xAxis: {
          data: ['乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称','乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称'],
          axisLine: {
            lineStyle: {
                color: '#0a3e98'
            }
          },
          axisTick: {
            show:false,
            lineStyle: {
              color: '#BAE7FF',
            },
          },
          splitLine: {
            lineStyle: {
                color: '#195384',
                type: "dotted",
            }
          },
          axisLabel: {
            show: true,
            margin: 14,
            fontSize: 14,
            color: '#fff',
          },
        },
        yAxis: [
          {
            name: '',
            nameTextStyle: {
              fontSize: 11,
              color: '#BAE7FF',
            },
            splitArea: { 
              show: false,
              lineStyle: {
                  color: '#195384',
                  type: "solid",
              }
            },
            type: 'value',
            gridIndex: 0,
            minInterval: 1,
            // max: 100,
            // interval: 25,
            // splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0a3e98',
                type: "dotted",
              }
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                    color: '#0a3e98'
                }
            },
            axisLabel: {
              show: true,
              margin: 14,
              fontSize: 14,
              color: '#fFF',
            },
          },
        ],
        series: [
          {
            name:'项目数量',
            type: 'bar',
            barWidth: 22,
            itemStyle: {
              // @ts-ignore
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: '#1EE7E7',
                  },
                  {
                    offset: 1,
                    color: '#1890FF',
                  },
                ]),
              },
            },
            data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
            z: 10,
            zlevel: 0,
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: 'rgba(24, 27, 36, 0.63)',
              },
            },
            symbolRepeat: 'fixed',
            symbolMargin: 4,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [22, 5],
            symbolPosition: 'start',
            symbolOffset: [1, 1],
            data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
            width: 2,
            z: 0,
            zlevel: 1,
          },
          {
            name: '外框',
            type: 'bar',
            barGap: '-110%', // 设置外框粗细
            barWidth: 22,
            itemStyle: {
              normal: {
                color: 'transparent', // 填充色
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: 'top', // insideTop 或者横向的 insideLeft
                },
              },
            },
            z: 0,
          },
        ],
        }
        option && myChart2.setOption(option);
      })
    },
},
 
mounted(){
    this.chart2() 
}复制

5.图表效果：