Echarts在线免费图表

 
            
let { yUnit, yData, sData, sData2, colorList, total, percents, units } = {
   yUnit: "总量",
   yData: ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"],
   sData: [170, 82, 105, 42, 58, 110, 169, 58, 132, 90],
   sData2: [85, 41, 52.5, 21, 58, 110, 169, 58, 132, 90],
   percents: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   units: ["1", "俩", "仨", "四", "五", "六", "七", "Ⅷ", "⑨", "Ⅹ"],
   total: 200,
   colorList: [
      { color: "#249EFF", offset: "0" },
      // { color: "#18E796", offset: "0.6" },
      { color: "#1E88E5", offset: "1" }
   ],
};

let s2Data = [];
for (let i = 0; i < sData.length; i++) {
   s2Data.push(total * 2);
}

let colorline = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList);

option = {
   grid: {
      left: 30,
      right: 30,
      top: 0,
      bottom: 0,
      containLabel: true
   },
   tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "rgba(11, 48, 83, 0.47)",
      borderColor: "#2BDBFB",
      textStyle: {
         color: "#fff"
      },
      formatter: function (params, ticket, callback) {
         let jz = params[0];
         let wz = params[2];
         let marker = params[params.length - 1].marker;
         let tool = `${marker}${jz.name}：<br/>
                            价值量：${jz.value} ${"亿元"}<br/>
                            功能量：${wz.value} ${wz.data.unit}<br/>`;
         // let tool = `${marker}${jz.name}：${jz.value}`;
         return tool;
      }
   },
   xAxis: [
      {
         type: "value",
         show: false
      },
      {
         type: "value",
         show: false
      }
   ],
   yAxis: [
      {
         type: "category",
         inverse: true,
         offset: 5,
         axisLabel: {
            show: true,
            color: "#3D3D3D",
            fontSize: 14
         },
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         scale: true,
         data: yData
      },
      {
         triggerEvent: true,
         show: true,
         inverse: true,
         data: yData,
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLabel: {
            interval: 0,
            color: ["#3D3D3D"],
            align: "left",
            verticalAlign: "center",
            lineHeight: 40,
            fontSize: 14,
            formatter: function (value, index) {
               // return (sData[index] ? ((sData[index] / total) * 100).toFixed(2) : 0) + "%";
               return percents[index];
            }
         }
      }
   ],
   series: [
      {
         type: "pictorialBar",
         // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
         // symbolSize: [45, 45],
         symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAo5JREFUSEu9ls9PU0EQxz/zeBawlAKxgBFjUONJE05ejVdD4o/ePREvHpRI/Bs8SNCDF6MX7w2aEK+GqycSb0YlRgxQDAgFCq+vb82UfWVbKaix3WSz6XSzn535zsw+oQVDWsDgSIgxRvd4UNkbT72bcWYkIvr7wNEQYoyJD/aBNiBe1a4jAspA6KxGRNReM36D2JurXQ8+BrQ7M2HteogCAmDXmSVrV1jVs4MgelO9tR54HEgCXXbtsP8pRD3YAbaATbtuW3DoelQDsSFSD/T2enA30Dtb5OyT1TA7H0SXNyMGlZD0WDqb8N7f7/NzVzr5AqwBGxao3pVjUD3EBfQAmYcr4eh0wdwLjek8SFVfpJhNydNHGX8GWAF+xiAR0ZDuZ5fVIg6RAgYm8uGtXCGacPc1SCBzI8nk1GAiByxbUCV0qk3VE2NM7IWGKDNb5OLYYullIw/qYerR8wFv7Gqy7YP1SEO3q964EBVbhe4FTt5cCCfmdqNsfJjBsNO7QtCt0YDERg8daxnEKbWRdi83PeQ/BhatRtsiEroQTVcV+wRwamQ+eLUecTqGFPuWq4DYpqDO1YGqU2mPb3PDidvAd+CHaiMiJReieqQ0VMDQ+c/B2/JenVTG+pmPUF/URkh/vVCFtEHp07nENWDBhqwgIkHLIS0J19HC9+UJUut7whfSdKz2/7XwNSn8bqt86c5y9OJ/p7DqU1OM4/kw+7oQPfijYkx5k1P9/uHFqCFwClJTWeslM54Pr89smruHtZXRLnk21e+/sRmlPUwbZqUQa9qKhWgHdvtX2jbI4foG2eWxNLzfIOdt8algFUDDBumAmtfqLSR+Ypv3aFV7VTOf3/ru2tQPiQbvxj+ZfwEdmGspkE58uAAAAABJRU5ErkJggg==",
         symbolSize: [30, 30],
         symbolOffset: [0, 0],
         symbolPosition: "right",
         z: 12,
         itemStyle: {
            normal: {
               color: "#C9D9DB"
            }
         },
         yAxisIndex: 1,
         data: (function () {
            var list = [];
            for (var i = 0; i < sData.length; i++) {
               list.push(2 * sData[i]);
            }
            return list;
         })()
      },
      {
         name: "数量",
         data: sData,
         type: "bar",
         smooth: true,
         showSymbol: false,
         itemStyle: {
            color: colorline
         },
         barWidth: "5",
         label: {
            normal: {
               show: false
            }
         },
         z: 11,
         emphasis: {
            lineStyle: {
               width: 1
            }
         }
      },
      {
         data: s2Data,
         type: "bar",
         smooth: true,
         showSymbol: false,
         barWidth: 1,
         barGap: "-80%",
         yAxisIndex: 1,
         itemStyle: {
            radio: "5px",
            // color: "rgba(3, 236, 253, 0.3)"
            color: "rgba(198, 226, 255, 1)"
         },
         label: {
            normal: {
               show: false
            }
         },
         z: 1
      },
      {
         // 分隔
         type: "pictorialBar",
         itemStyle: {
            normal: {
               color: "#091F48b3"
            }
         },
         symbolRepeat: "fixed",
         symbolMargin: 10, //图形的两边间隔
         symbol: "rect",
         symbolClip: true, //是否裁剪图形
         symbolSize: [5, 2],
         barWidth: 1,
         symbolPosition: "start", //图形的定位位置。
         symbolOffset: [-2, 0], //图形相对于原本位置的偏移。
         data: s2Data,
         z: 2,
         animationEasing: "elasticOut"
      },
      {
         type: "bar",
         xAxisIndex: 1,
         barWidth: 1,
         barGap: "-80%",
         itemStyle: {
            color: "rgba(0, 0, 0, 0)"
         },
         data: sData2.map((val, idx) => ({ value: val, unit: units[idx] }))
      }
   ]
};