Echarts在线免费图表

 
             let obj = {
    ydata: [
        '湖南',
        '云南',
        '湖北',
        '广东',
        '广西',
        '贵州',
        '北京',
        '海南',
        '上海',
      ],
      data: {
        data1: [70, 73, 93, 45, 33, 88, 30, 20, 50],
        data2: [40, 82, 63, 66, 57, 44, 55, 22, 35],
        data3: [58, 28, 22, 43, 12, 101, 44, 90, 11],
      },
 }
 
 let accountArr = [];
      obj.data.data1.forEach((item, index) => {
        accountArr.push(item + obj.data.data2[index] + obj.data.data3[index]);
      });

 option = {
        //鼠标滑过提示栏
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            let arr = [...params].slice(0, -1);
            let str = '';
            arr.forEach((item) => {
              str += item.marker + item.seriesName + item.data + '<br />';
            });
            str = arr[0].name + '<br />' + str;
            return str;
          },
        },
        title: [
          {
            x: '8%',
            y: '8%',
            text: '分布情况',
            textStyle: {
              color: '#333',
              fontSize: 18,
              fontWeight: 500,
            },
          },
        ],
        //图表选择栏
        legend: {
          icon: 'square',
          // top: 20,
          bottom: 76,
          left: 140,
          orient: 'vertical', //图例方向【horizontal/vertical】
          itemHeight: 18, //修改icon图形大小
          itemWidth: 18, //修改icon图形大小
          itemGap: 30,
          textStyle: {
            fontSize: 13,
            color: '#000',
            padding: [50, 20, 0, 0],
          },
          data: ['统计数据一', '统计数据二', '统计数据三'],
        },
        //图标离容器的距离
        grid: {
          left: '300',
          right: '150',
          bottom: '50',
          //是否包含坐标轴
          containLabel: true,
          //鼠标滑过是否显示信息栏，目前来看最好在grid中配置tooltip鼠标滑过信息栏
        },
        //x坐标轴
        xAxis: [
          {
            type: 'value',
            name: '\n\n    单位：个',
            nameTextStyle: {
              color: '#333',
              fontSize: 14,
              // padding: [0, 40, 0, 0],
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: '#454545',
              fontSize: 14,
            },
          },
        ],
        //y坐标轴
        yAxis: [
          {
            type: 'category',
            name: '',
            data: obj.ydata,
            splitLine: {
              show: false,
            },
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: '#ccc',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#333',
                fontSize: 14,
              },
            },
          },
        ],
        // 数据展示区域
        series: [
          {
            name: '统计数据一',
            type: 'bar',
            stack: 'Ad',
            color: '#EE6666',
            barWidth: 18,
            // emphasis: {
            //   focus: 'series'
            // },
            data: obj.data.data1,
            markLine: {
              symbol: 'none',
              label: {
                show: true,
                position: 'end',
                formatter: '风险率' + '\n\n{c}',
                color: '#FC614C',
              },
              lineStyle: {
                type: 'solid',
                color: '#FC614C',
                width: 2,
              },
              data: [
                {
                  name: '刻度标线',
                  yAxis: 122,
                },
              ],
            },
          },
          {
            name: '统计数据二',
            type: 'bar',
            color: '#F7D270',
            stack: 'Ad',
            barWidth: 18,
            data: obj.data.data2,
          },
          {
            name: '统计数据三',
            type: 'bar',
            stack: 'Ad',
            color: '#536CC4',
            barWidth: 18,
            data: obj.data.data3,
            z: 2,
          },
         //  方案1,柱子的x轴会被数据撑开
          {
            name: '',
            show: false,
            type: 'bar',
            stack: 'Ad',
            color: 'transparent',
            barWidth: 18,
            label: {
              show: true,
              position: [10, 4],
              formatter: (params) => {
                return accountArr[params.dataIndex];
              },
            },
            symbolSize: 0, // symbol的大小设置为0
            showSymbol: false, // 不显示symbol
            lineStyle: {
              // width: 0, // 线宽是0
              color: 'rgba(0, 0, 0, 0)', // 线的颜色是透明的
            },
            data: accountArr,
          },

         //  方案2,柱子的x轴不会被数据撑开
         //  {
         //    name: '',
         //    type: 'bar',
         //    stack: '',
         //    color: '#eee',
         //    label: {
         //      show: true,
         //      position: 'outside',
         //      formatter: (params) => {
         //        return accountArr[params.dataIndex];
         //      },
         //    },
         //    z: 1,
         //    //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
         //    barGap: '-100%',
         //    barWidth: 18,
         //    data: accountArr,
         //  },
        ],
      };