Echarts 多个图表

矫情吗；* 2022-05-28 12:56 415阅读 0赞

一个Option 四个均匀分布图表

20180406111258634 

  1. var dataAll = [
  2.     [
  3.         [10.0, 8.04],
  4.         [8.0, 6.95],
  5.         [13.0, 7.58],
  6.         [9.0, 8.81],
  7.         [11.0, 8.33],
  8.         [14.0, 9.96],
  9.         [6.0, 7.24],
  10.         [4.0, 4.26],
  11.         [12.0, 10.84],
  12.         [7.0, 4.82],
  13.         [5.0, 5.68]
  14.     ],
  15.     [
  16.         [10.0, 9.14],
  17.         [8.0, 8.14],
  18.         [13.0, 8.74],
  19.         [9.0, 8.77],
  20.         [11.0, 9.26],
  21.         [14.0, 8.10],
  22.         [6.0, 6.13],
  23.         [4.0, 3.10],
  24.         [12.0, 9.13],
  25.         [7.0, 7.26],
  26.         [5.0, 4.74]
  27.     ],
  28.     [
  29.         [10.0, 7.46],
  30.         [8.0, 6.77],
  31.         [13.0, 12.74],
  32.         [9.0, 7.11],
  33.         [11.0, 7.81],
  34.         [14.0, 8.84],
  35.         [6.0, 6.08],
  36.         [4.0, 5.39],
  37.         [12.0, 8.15],
  38.         [7.0, 6.42],
  39.         [5.0, 5.73]
  40.     ],
  41.     [
  42.         [8.0, 6.58],
  43.         [8.0, 5.76],
  44.         [8.0, 7.71],
  45.         [8.0, 8.84],
  46.         [8.0, 8.47],
  47.         [8.0, 7.04],
  48.         [8.0, 5.25],
  49.         [19.0, 12.50],
  50.         [8.0, 5.56],
  51.         [8.0, 7.91],
  52.         [8.0, 6.89]
  53.     ]
  54. ];
  56. var markLineOpt = {
  57.     animation: false,
  58.     label: {
  59.         normal: {
  60.             formatter: 'y = 0.5 * x + 3',
  61.             textStyle: {
  62.                 align: 'right'
  63.             }
  64.         }
  65.     },
  66.     lineStyle: {
  67.         normal: {
  68.             type: 'solid'
  69.         }
  70.     },
  71.     tooltip: {
  72.         formatter: 'y = 0.5 * x + 3'
  73.     },
  74.     data: [[{
  75.         coord: [0, 3],
  76.         symbol: 'none'
  77.     }, {
  78.         coord: [20, 13],
  79.         symbol: 'none'
  80.     }]]
  81. };
  83. option = {
  84.     title: {
  85.         text: 'Anscombe\'s quartet',
  86.         x: 'center',
  87.         y: 0
  88.     },
  89.     grid: [
  90.         /*38% 宽度图表刚好不接触*/
  91.         /*左上*/
  92.         {x: '7%', y: '7%', width: '38%', height: '38%'},
  93.         /*右上*/
  94.         {x2: '7%', y: '7%', width: '38%', height: '38%'},
  95.         /*左下*/
  96.         {x: '7%', y2: '7%', width: '38%', height: '38%'},
  97.         /*右下*/
  98.         {x2: '7%', y2: '7%', width: '38%', height: '38%'}
  99.     ],
  100.     tooltip: {
  101.         formatter: 'Group {a}: ({c})'
  102.     },
  103.     xAxis: [
  104.         {gridIndex: 0, min: 0, max: 20},
  105.         {gridIndex: 1, min: 0, max: 20},
  106.         {gridIndex: 2, min: 0, max: 20},
  107.         {gridIndex: 3, min: 0, max: 20}
  108.     ],
  109.     yAxis: [
  110.         {gridIndex: 0, min: 0, max: 15},
  111.         {gridIndex: 1, min: 0, max: 15},
  112.         {gridIndex: 2, min: 0, max: 15},
  113.         {gridIndex: 3, min: 0, max: 15}
  114.     ],
  115.     series: [
  116.         {
  117.             name: 'I',
  118.             type: 'scatter',
  119.             xAxisIndex: 0,
  120.             yAxisIndex: 0,
  121.             data: dataAll[0],
  122.             markLine: markLineOpt
  123.         },
  124.         {
  125.             name: 'II',
  126.             type: 'scatter',
  127.             xAxisIndex: 1,
  128.             yAxisIndex: 1,
  129.             data: dataAll[1],
  130.             markLine: markLineOpt
  131.         },
  132.         {
  133.             name: 'III',
  134.             type: 'scatter',
  135.             xAxisIndex: 2,
  136.             yAxisIndex: 2,
  137.             data: dataAll[2],
  138.             markLine: markLineOpt
  139.         },
  140.         {
  141.             name: 'IV',
  142.             type: 'scatter',
  143.             xAxisIndex: 3,
  144.             yAxisIndex: 3,
  145.             data: dataAll[3],
  146.             markLine: markLineOpt
  147.         }
  148.     ]
  149. };

左右均匀分布

  1. var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
  2. var yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10'];
  3. var option = {
  4.     backgroundColor: '#0f375f',
  5.     title: [{
  6.         text: "各渠道投诉占比",
  7.         x: 'center',
  8.         y: 0,
  9.         textStyle: {
  10.             color: "#fff",
  11.             fontSize: "14"
  13.         }
  14.     }, ],
  15.     grid: [{
  16.             x: '7%',
  17.             y: '7%',
  18.             width: '38%'
  19.         },
  20.         {
  21.             x2: '7%',
  22.             y: '7%',
  23.             width: '38%'
  24.         },
  25.     ],
  26.     tooltip: {
  27.         formatter: '{b} ({c})'
  28.     },
  29.     xAxis: [{
  30.             gridIndex: 0,
  31.             axisTick: {
  32.                 show: false
  33.             },
  34.             axisLabel: {
  35.                 show: false
  36.             },
  37.             splitLine: {
  38.                 show: false
  39.             },
  40.             axisLine: {
  41.                 show: false
  42.             }
  43.         },
  44.         {
  45.             gridIndex: 1,
  46.             axisTick: {
  47.                 show: false
  48.             },
  49.             axisLabel: {
  50.                 show: false
  51.             },
  52.             splitLine: {
  53.                 show: false
  54.             },
  55.             axisLine: {
  56.                 show: false
  57.             }
  58.         },
  59.     ],
  60.     yAxis: [{
  61.         gridIndex: 0,
  62.         interval: 0,
  63.         data: yAxisData.reverse(),
  64.         axisTick: {
  65.             show: false
  66.         },
  67.         axisLabel: {
  68.             show: true
  69.         },
  70.         splitLine: {
  71.             show: false
  72.         },
  73.         axisLine: {
  74.             show: true,
  75.             lineStyle: {
  76.                 color: "#6173a3"
  77.             }
  78.         },
  79.     }, {
  80.         gridIndex: 1,
  81.         interval: 0,
  82.         data: yAxisData.reverse(),
  83.         axisTick: {
  84.             show: false
  85.         },
  86.         axisLabel: {
  87.             show: true
  88.         },
  89.         splitLine: {
  90.             show: false
  91.         },
  92.         axisLine: {
  93.             show: true,
  94.             lineStyle: {
  95.                 color: "#6173a3"
  96.             }
  97.         },
  98.     }],
  99.     series: [
  101.         {
  102.             name: '投诉原因TOP10',
  103.             type: 'bar',
  104.             xAxisIndex: 0,
  105.             yAxisIndex: 0,
  106.             barWidth: '45%',
  107.             itemStyle: {
  108.                 normal: {
  109.                     color: '#86c9f4'
  110.                 }
  111.             },
  112.             label: {
  113.                 normal: {
  114.                     show: true,
  115.                     position: "right",
  116.                     textStyle: {
  117.                         color: "#9EA7C4"
  118.                     }
  119.                 }
  120.             },
  121.             data: dataAll.sort(),
  122.         }, {
  123.             name: '各渠道投诉占比',
  124.             type: 'bar',
  125.             xAxisIndex: 1,
  126.             yAxisIndex: 1,
  127.             barWidth: '45%',
  128.             itemStyle: {
  129.                 normal: {
  130.                     color: '#86c9f4'
  131.                 }
  132.             },
  133.             label: {
  134.                 normal: {
  135.                     show: true,
  136.                     position: "right",
  137.                     textStyle: {
  138.                         color: "#9EA7C4"
  139.                     }
  140.                 }
  141.             },
  142.             data: dataAll.sort(),
  143.         },
  145.     ]
  146. };

20180406110711811

发表评论

表情：
评论列表 （有 0 条评论，415人围观）

还没有评论，来说两句吧...

相关阅读

    相关 echarts图表演示图表演示

    eCharts图表演示 比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。 郑州的大数据产

    怼烎@怼烎@/ 0 赞/ 90 阅读