echarts 折线图_数据分区_左右滑动_可拖拽_常用图表配置_数据可视化

Echarts 常用各类图表模板配置

注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

---

---

一、数据分区显示

const data = [
  ['2012-01-01', 81],
  ['2012-01-02', 74],
  ['2012-01-03', 35],
  ['2012-01-04', 30],
  ['2012-01-05', 63],
  ['2012-01-06', 95],
  ['2012-01-07', 65],
  ['2012-01-08', 89],
  ['2012-01-09', 102],
  ['2012-01-10', 161],
  ['2012-01-11', 25],
  ['2012-01-12', 86],
  ['2012-01-13', 79],
  ['2012-01-14', 60],
  ['2012-01-15', 70],
  ['2012-01-16', 106],
  ['2012-01-17', 111],
  ['2012-01-18', 193],
  ['2012-01-19', 269],
  ['2012-01-20', 131],
  ['2012-01-21', 21],
  ['2012-01-22', 23],
  ['2012-01-23', 149],
  ['2012-01-24', 49],
  ['2012-01-25', 45],
  ['2012-01-26', 78],
  ['2012-01-27', 67],
  ['2012-01-28', 74],
  ['2012-01-29', 62],
  ['2012-01-30', 66],
  ['2012-01-31', 92],
  ['2012-02-01', 30],
  ['2012-02-02', 26],
  ['2012-02-03', 60],
  ['2012-02-04', 52],
  ['2012-02-05', 84],
  ['2012-02-06', 112],
  ['2012-02-07', 64],
  ['2012-02-08', 34],
  ['2012-02-09', 58],
  ['2012-02-10', 49],
  ['2012-02-11', 73],
  ['2012-02-12', 75],
  ['2012-02-13', 100],
  ['2012-02-14', 125],
  ['2012-02-15', 62],
  ['2012-02-16', 61],
  ['2012-02-17', 34],
  ['2012-02-18', 29],
  ['2012-02-19', 68],
  ['2012-02-20', 73],
  ['2012-02-21', 118],
  ['2012-02-22', 118],
  ['2012-02-23', 73],
  ['2012-02-24', 73],
  ['2012-02-25', 57],
  ['2012-02-26', 57],
  ['2012-02-27', 95],
  ['2012-02-28', 152],
  ['2012-02-29', 118],
  ['2012-03-01', 142],
  ['2012-03-02', 111],
  ['2012-03-03', 68],
  ['2012-03-04', 90],
  ['2012-03-05', 97],
  ['2012-03-06', 63],
  ['2012-03-07', 38],
  ['2012-03-08', 31],
  ['2012-03-09', 65],
  ['2012-03-10', 78],
  ['2012-03-11', 36],
  ['2012-03-12', 62],
  ['2012-03-13', 104],
  ['2012-03-14', 57],
  ['2012-03-15', 64],
  ['2012-03-16', 109],
  ['2012-03-17', 144],
  ['2012-03-18', 61],
  ['2012-03-19', 57],
  ['2012-03-20', 81],
  ['2012-03-21', 105],
  ['2012-03-22', 146],
  ['2012-03-23', 55],
  ['2012-03-24', 56],
  ['2012-03-25', 30],
  ['2012-03-26', 90],
  ['2012-03-27', 112],
  ['2012-03-28', 65],
  ['2012-03-29', 90],
  ['2012-03-30', 76],
  ['2012-03-31', 159],
  ['2012-04-01', 78],
  ['2012-04-02', 103],
  ['2012-04-03', 73],
  ['2012-04-03', 73],
  ['2012-04-04', 73],
  ['2012-04-05', 64],
  ['2012-04-06', 70],
  ['2012-04-07', 71],
  ['2012-04-08', 119],
  ['2012-04-09', 118],
  ['2012-04-10', 138],
  ['2012-04-11', 41],
  ['2012-04-12', 69],
  ['2012-04-13', 81],
  ['2012-04-14', 100],
  ['2012-04-15', 109],
  ['2012-04-16', 84],
  ['2012-04-17', 100],
  ['2012-04-18', 140],
  ['2012-04-19', 98],
  ['2012-04-20', 133],
  ['2012-04-21', 81],
  ['2012-04-22', 102],
  ['2012-04-23', 140],
  ['2012-04-24', 133],
  ['2012-04-25', 32],
  ['2012-04-26', 60],
  ['2012-04-27', 147],
  ['2012-04-28', 164],
  ['2012-04-29', 473],
  ['2012-04-30', 268],
  ['2012-05-01', 208],
  ['2012-05-02', 111],
  ['2012-05-03', 106],
  ['2012-05-04', 100],
  ['2012-05-05', 99],
  ['2012-05-06', 100],
  ['2012-05-07', 100],
  ['2012-05-08', 111],
  ['2012-05-09', 107],
  ['2012-05-10', 129],
  ['2012-05-11', 133],
  ['2012-05-12', 90],
  ['2012-05-13', 96],
  ['2012-05-14', 64],
  ['2012-05-15', 58],
  ['2012-05-16', 58],
  ['2012-05-17', 78],
  ['2012-05-18', 84],
  ['2012-05-19', 143],
  ['2012-05-20', 85],
  ['2012-05-21', 97],
  ['2012-05-22', 109],
  ['2012-05-23', 64],
  ['2012-05-24', 69],
  ['2012-05-25', 63],
  ['2012-05-26', 90],
  ['2012-05-27', 88],
  ['2012-05-28', 133],
  ['2012-05-29', 116],
  ['2012-05-30', 29],
  ['2012-05-31', 64],
  ['2012-06-01', 54],
  ['2012-06-02', 90],
  ['2012-06-03', 112],
  ['2012-06-04', 80],
  ['2012-06-05', 65],
  ['2012-06-06', 98],
  ['2012-06-07', 71],
  ['2012-06-08', 77],
  ['2012-06-09', 91],
  ['2012-06-10', 32],
  ['2012-06-11', 50],
  ['2012-06-12', 58],
  ['2012-06-13', 62],
  ['2012-06-14', 50],
  ['2012-06-15', 22],
  ['2012-06-16', 33],
  ['2012-06-17', 69],
  ['2012-06-18', 137],
  ['2012-06-19', 132],
  ['2012-06-20', 105],
  ['2012-06-21', 112],
  ['2012-06-22', 84],
  ['2012-06-23', 81],
  ['2012-06-24', 95],
  ['2012-06-25', 49],
  ['2012-06-26', 65],
  ['2012-06-27', 55],
  ['2012-06-28', 54],
  ['2012-06-29', 60],
  ['2012-06-30', 46],
  ['2012-07-01', 70],
  ['2012-07-02', 69],
  ['2012-07-03', 59],
  ['2012-07-04', 71],
  ['2012-07-05', 70],
  ['2012-07-06', 59],
  ['2012-07-07', 86],
  ['2012-07-08', 84],
  ['2012-07-09', 64],
  ['2012-07-10', 50],
  ['2012-07-11', 44],
  ['2012-07-12', 46],
  ['2012-07-13', 31],
  ['2012-07-14', 48],
  ['2012-07-15', 53],
  ['2012-07-16', 70],
  ['2012-07-17', 78],
  ['2012-07-18', 71],
  ['2012-07-19', 82],
  ['2012-07-20', 111],
  ['2012-07-21', 131],
  ['2012-07-22', 15],
  ['2012-07-24', 60],
  ['2012-07-25', 72],
  ['2012-07-26', 55],
  ['2012-07-26', 55],
  ['2012-07-27', 50],
  ['2012-07-28', 56],
  ['2012-07-29', 57],
  ['2012-07-30', 30],
  ['2012-07-31', 28],
  ['2012-08-01', 20],
  ['2012-08-02', 17],
  ['2012-08-03', 53],
  ['2012-08-04', 40],
  ['2012-08-05', 48],
  ['2012-08-06', 60],
  ['2012-08-07', 59],
  ['2012-08-08', 68],
  ['2012-08-09', 43],
  ['2012-08-10', 72],
  ['2012-08-11', 80],
  ['2012-08-12', 41],
  ['2012-08-13', 36],
  ['2012-08-14', 62],
  ['2012-08-15', 60],
  ['2012-08-16', 68],
  ['2012-08-17', 83],
  ['2012-08-18', 110],
  ['2012-08-19', 84],
  ['2012-08-20', 92],
  ['2012-08-21', 25],
  ['2012-08-22', 40],
  ['2012-08-23', 74],
  ['2012-08-24', 94],
  ['2012-08-25', 92],
  ['2012-08-26', 117],
  ['2012-08-27', 100],
  ['2012-08-28', 59],
  ['2012-08-29', 84],
  ['2012-08-30', 135],
  ['2012-08-31', 150],
  ['2012-09-01', 128],
  ['2012-09-02', 52],
  ['2012-09-03', 15],
  ['2012-09-04', 22],
  ['2012-09-05', 50],
  ['2012-09-06', 70],
  ['2012-09-07', 77],
  ['2012-09-08', 40],
  ['2012-09-09', 79],
  ['2012-09-10', 96],
  ['2012-09-11', 93],
  ['2012-09-12', 44],
  ['2012-09-13', 28],
  ['2012-09-14', 31],
  ['2012-09-15', 50],
  ['2012-09-16', 65],
  ['2012-09-17', 63],
  ['2012-09-18', 61],
  ['2012-09-19', 56],
  ['2012-09-21', 128],
  ['2012-09-22', 93],
  ['2012-09-23', 85],
  ['2012-09-24', 74],
  ['2012-09-25', 78],
  ['2012-09-26', 26],
  ['2012-09-27', 65],
  ['2012-09-28', 15],
  ['2012-09-29', 24],
  ['2012-09-30', 38],
  ['2012-10-01', 52],
  ['2012-10-02', 78],
  ['2012-10-03', 108],
  ['2012-10-04', 28],
  ['2012-10-05', 41],
  ['2012-10-06', 74],
  ['2012-10-07', 83],
  ['2012-10-08', 123],
  ['2012-10-09', 140],
  ['2012-10-10', 18],
  ['2012-10-11', 73],
  ['2012-10-12', 121],
  ['2012-10-13', 97],
  ['2012-10-14', 40],
  ['2012-10-15', 83],
  ['2012-10-16', 78],
  ['2012-10-17', 23],
  ['2012-10-18', 65],
  ['2012-10-19', 79],
  ['2012-10-20', 139],
  ['2012-10-21', 81],
  ['2012-10-22', 26],
  ['2012-10-23', 54],
  ['2012-10-24', 89],
  ['2012-10-25', 90],
  ['2012-10-26', 163],
  ['2012-10-27', 154],
  ['2012-10-28', 22],
  ['2012-10-29', 59],
  ['2012-10-30', 36],
  ['2012-10-31', 51],
  ['2012-11-01', 67],
  ['2012-11-02', 103],
  ['2012-11-03', 135],
  ['2012-11-04', 20],
  ['2012-11-05', 16],
  ['2012-11-06', 48],
  ['2012-11-07', 80],
  ['2012-11-08', 62],
  ['2012-11-09', 93],
  ['2012-11-10', 82],
  ['2012-11-11', 17],
  ['2012-11-12', 27],
  ['2012-11-13', 30],
  ['2012-11-14', 26],
  ['2012-11-15', 71],
  ['2012-11-16', 92],
  ['2012-11-17', 47],
  ['2012-11-18', 96],
  ['2012-11-19', 55],
  ['2012-11-20', 74],
  ['2012-11-21', 123],
  ['2012-11-22', 156],
  ['2012-11-23', 22],
  ['2012-11-24', 80],
  ['2012-11-25', 133],
  ['2012-11-26', 44],
  ['2012-11-27', 105],
  ['2012-11-28', 151],
  ['2012-11-29', 54],
  ['2012-12-01', 50],
  ['2012-12-02', 96],
  ['2012-12-03', 123],
  ['2012-12-04', 50],
  ['2012-12-05', 64],
  ['2012-12-06', 50],
  ['2012-12-07', 73],
  ['2012-12-08', 53],
  ['2012-12-09', 38],
  ['2012-12-10', 53],
  ['2012-12-11', 86],
  ['2012-12-12', 103],
  ['2012-12-13', 130],
  ['2012-12-14', 107],
  ['2012-12-15', 114],
  ['2012-12-16', 108],
  ['2012-12-17', 45],
  ['2012-12-18', 22],
  ['2012-12-19', 72],
  ['2012-12-20', 121],
  ['2012-12-21', 120],
  ['2012-12-22', 24],
  ['2012-12-23', 36],
  ['2012-12-24', 53],
  ['2012-12-25', 58],
  ['2012-12-26', 67],
  ['2012-12-28', 137],
  ['2012-12-29', 94],
  ['2012-12-30', 38],
  ['2012-12-31', 57],
  ['2013-01-01', 71],
  ['2013-01-02', 27],
  ['2013-01-03', 35],
  ['2013-01-04', 57],
  ['2013-01-05', 79],
  ['2013-01-06', 58],
  ['2013-01-07', 105],
  ['2013-01-08', 124],
  ['2013-01-09', 32],
  ['2013-01-10', 87],
  ['2013-01-11', 232],
  ['2013-01-12', 174],
  ['2013-01-13', 498],
  ['2013-01-14', 184],
  ['2014-01-01', 85],
  ['2014-01-02', 158],
  ['2014-01-03', 74],
  ['2014-01-04', 165],
  ['2014-01-05', 113],
  ['2014-01-06', 190],
  ['2014-01-07', 122],
  ['2014-01-10', 95],
  ['2014-01-11', 159],
  ['2014-01-12', 52],
  ['2014-01-13', 117],
  ['2014-01-14', 113],
  ['2014-01-15', 180],
  ['2014-01-16', 403],
  ['2014-01-17', 209],
  ['2014-01-18', 113],
  ['2014-01-19', 149],
  ['2014-01-21', 68],
  ['2014-01-22', 162],
  ['2014-01-23', 276],
  ['2014-01-24', 195],
  ['2014-01-26', 77],
  ['2014-01-27', 114],
  ['2014-01-28', 67],
  ['2014-01-29', 165],
  ['2014-01-30', 93],
  ['2014-01-31', 188],
  ['2014-02-01', 178],
  ['2014-02-02', 85],
  ['2014-02-05', 119],
  ['2014-02-06', 158],
  ['2014-02-07', 124],
  ['2014-02-08', 84],
  ['2014-02-10', 53],
  ['2014-02-11', 142],
  ['2014-02-12', 150],
  ['2014-02-13', 242],
  ['2014-02-14', 329],
  ['2014-02-15', 429],
  ['2014-02-16', 348],
  ['2014-02-17', 118],
  ['2014-02-18', 98],
  ['2014-02-19', 92],
  ['2014-02-20', 270],
  ['2014-02-21', 311],
  ['2014-02-22', 311],
  ['2014-02-23', 255],
  ['2014-02-24', 313],
  ['2014-02-25', 404],
  ['2014-02-28', 113],
  ['2014-03-01', 68],
  ['2014-03-02', 189],
  ['2014-03-03', 268],
  ['2014-03-04', 67],
  ['2014-03-07', 70],
  ['2014-03-08', 179],
  ['2014-03-09', 127],
  ['2014-03-10', 110],
  ['2014-03-11', 195],
  ['2014-03-13', 69],
  ['2014-03-14', 64],
  ['2014-03-15', 133],
  ['2014-03-16', 145],
  ['2014-03-17', 142],
  ['2014-03-18', 85],
  ['2014-03-19', 73],
  ['2014-03-21', 62],
  ['2014-03-22', 86],
  ['2014-03-23', 186],
  ['2014-03-24', 271],
  ['2014-03-25', 255],
  ['2014-03-26', 331],
  ['2014-03-27', 285],
  ['2014-03-28', 169],
  ['2014-03-29', 63],
  ['2014-03-30', 77],
  ['2014-03-31', 183],
  ['2014-04-01', 147],
  ['2014-04-02', 133],
  ['2014-04-03', 66],
  ['2014-04-04', 91],
  ['2014-04-05', 68],
  ['2014-04-06', 98],
  ['2014-04-07', 135],
  ['2014-04-08', 223],
  ['2014-04-09', 156],
  ['2014-04-10', 246],
  ['2014-04-11', 83],
  ['2014-04-12', 133],
  ['2014-04-13', 212],
  ['2014-04-14', 270],
  ['2014-04-15', 109],
  ['2014-04-16', 90],
  ['2014-04-17', 124],
  ['2014-04-18', 182],
  ['2014-04-19', 84],
  ['2014-04-20', 84],
  ['2014-04-21', 73],
  ['2014-04-22', 85],
  ['2014-04-23', 156],
  ['2014-04-24', 156],
  ['2014-04-25', 163],
  ['2014-04-26', 69],
  ['2014-04-27', 74],
  ['2014-04-28', 83],
  ['2014-04-29', 122],
  ['2014-04-30', 139],
  ['2014-05-01', 156],
  ['2014-05-03', 93],
  ['2014-05-04', 57],
  ['2014-05-05', 54],
  ['2014-05-06', 105],
  ['2014-05-07', 82],
  ['2014-05-08', 104],
  ['2014-05-09', 84],
  ['2014-05-10', 69],
  ['2014-05-12', 74],
  ['2014-05-13', 86],
  ['2014-05-14', 59],
  ['2014-05-15', 122],
  ['2014-05-16', 92],
  ['2014-05-17', 124],
  ['2014-05-18', 171],
  ['2014-05-19', 146],
  ['2014-05-20', 113],
  ['2014-05-21', 170],
  ['2014-05-22', 183],
  ['2014-05-23', 140],
  ['2014-05-24', 104],
  ['2014-05-25', 91],
  ['2014-05-26', 77],
  ['2014-05-27', 107],
  ['2014-05-28', 121],
  ['2014-05-29', 120],
  ['2014-05-30', 192],
  ['2014-05-31', 177],
  ['2014-06-01', 130],
  ['2014-06-02', 90],
  ['2014-06-03', 117],
  ['2014-06-04', 124],
  ['2014-06-05', 157],
  ['2014-06-06', 103],
  ['2014-06-07', 51],
  ['2014-06-08', 70],
  ['2014-06-09', 87],
  ['2014-06-10', 95],
  ['2014-06-11', 74],
  ['2014-06-12', 90],
  ['2014-06-13', 116],
  ['2014-06-14', 165],
  ['2014-06-15', 178],
  ['2014-06-16', 178],
  ['2014-06-17', 104],
  ['2014-06-18', 116],
  ['2014-06-19', 116],
  ['2014-06-20', 84],
  ['2014-06-21', 96],
  ['2014-06-22', 91],
  ['2014-06-23', 115],
  ['2014-06-24', 161],
  ['2014-06-25', 138],
  ['2014-06-26', 163],
  ['2014-06-27', 68],
  ['2014-06-28', 77],
  ['2014-06-29', 161],
  ['2014-06-30', 185],
  ['2014-07-01', 172],
  ['2014-07-02', 80],
  ['2014-07-03', 248],
  ['2014-07-04', 237],
  ['2014-07-05', 165],
  ['2014-07-06', 256],
  ['2014-07-07', 216],
  ['2014-07-08', 134],
  ['2014-07-09', 63],
  ['2014-07-10', 114],
  ['2014-07-11', 77],
  ['2014-07-12', 80],
  ['2014-07-13', 64],
  ['2014-07-14', 156],
  ['2014-07-15', 140],
  ['2014-07-16', 133],
  ['2014-07-17', 186],
  ['2014-07-18', 182],
  ['2014-07-19', 106],
  ['2014-07-20', 119],
  ['2014-07-21', 68],
  ['2014-07-22', 54],
  ['2014-07-23', 82],
  ['2014-07-24', 90],
  ['2014-07-25', 134],
  ['2014-07-26', 188],
  ['2014-07-27', 194],
  ['2014-07-28', 159],
  ['2014-07-29', 159],
  ['2014-07-30', 169],
  ['2014-07-31', 244],
  ['2014-08-01', 199],
  ['2014-08-02', 163],
  ['2014-08-03', 149],
  ['2014-08-05', 80],
  ['2014-08-06', 67],
  ['2014-08-07', 162],
  ['2014-08-08', 140],
  ['2014-08-09', 143],
  ['2014-08-10', 125],
  ['2014-08-11', 76],
  ['2014-08-12', 119],
  ['2014-08-13', 70],
  ['2014-08-14', 104],
  ['2014-08-15', 109],
  ['2014-08-16', 159],
  ['2014-08-17', 124],
  ['2014-08-18', 135],
  ['2014-08-19', 150],
  ['2014-08-20', 164],
  ['2014-08-21', 169],
  ['2014-08-22', 83],
  ['2014-08-23', 155],
  ['2014-08-24', 75],
  ['2014-08-25', 59],
  ['2014-08-26', 78],
  ['2014-08-27', 136],
  ['2014-08-28', 103],
  ['2014-08-29', 104],
  ['2014-08-30', 176],
  ['2014-08-31', 89],
  ['2014-09-01', 127],
  ['2014-09-03', 54],
  ['2014-09-04', 100],
  ['2014-09-05', 140],
  ['2014-09-06', 186],
  ['2014-09-07', 200],
  ['2014-09-08', 61],
  ['2014-09-09', 109],
  ['2014-09-10', 111],
  ['2014-09-11', 114],
  ['2014-09-12', 97],
  ['2014-09-13', 94],
  ['2014-09-14', 66],
  ['2014-09-15', 54],
  ['2014-09-16', 87],
  ['2014-09-17', 80],
  ['2014-09-18', 84],
  ['2014-09-19', 117],
  ['2014-09-20', 168],
  ['2014-09-21', 129],
  ['2014-09-22', 127],
  ['2014-09-23', 64],
  ['2014-09-24', 60],
  ['2014-09-25', 144],
  ['2014-09-26', 170],
  ['2014-09-27', 58],
  ['2014-09-28', 87],
  ['2014-09-29', 70],
  ['2014-09-30', 53],
  ['2014-10-01', 92],
  ['2014-10-02', 78],
  ['2014-10-03', 123],
  ['2014-10-04', 95],
  ['2014-10-05', 54],
  ['2014-10-06', 68],
  ['2014-10-07', 200],
  ['2014-10-08', 314],
  ['2014-10-09', 379],
  ['2014-10-10', 346],
  ['2014-10-11', 233],
  ['2014-10-14', 80],
  ['2014-10-15', 73],
  ['2014-10-16', 76],
  ['2014-10-17', 132],
  ['2014-10-18', 211],
  ['2014-10-19', 289],
  ['2014-10-20', 250],
  ['2014-10-21', 82],
  ['2014-10-22', 99],
  ['2014-10-23', 163],
  ['2014-10-24', 267],
  ['2014-10-25', 353],
  ['2014-10-26', 78],
  ['2014-10-27', 72],
  ['2014-10-28', 88],
  ['2014-10-29', 140],
  ['2014-10-30', 206],
  ['2014-10-31', 204],
  ['2014-11-01', 65],
  ['2014-11-03', 59],
  ['2014-11-04', 150],
  ['2014-11-05', 79],
  ['2014-11-07', 63],
  ['2014-11-08', 93],
  ['2014-11-09', 80],
  ['2014-11-10', 95],
  ['2014-11-11', 59],
  ['2014-11-13', 65],
  ['2014-11-14', 77],
  ['2014-11-15', 143],
  ['2014-11-16', 98],
  ['2014-11-17', 64],
  ['2014-11-18', 93],
  ['2014-11-19', 282],
  ['2014-11-23', 155],
  ['2014-11-24', 94],
  ['2014-11-25', 196],
  ['2014-11-26', 293],
  ['2014-11-27', 83],
  ['2014-11-28', 114],
  ['2014-11-29', 276],
  ['2014-12-01', 54],
  ['2014-12-02', 65],
  ['2014-12-03', 51],
  ['2014-12-05', 62],
  ['2014-12-06', 89],
  ['2014-12-07', 65],
  ['2014-12-08', 82],
  ['2014-12-09', 276],
  ['2014-12-10', 153],
  ['2014-12-11', 52],
  ['2014-12-13', 69],
  ['2014-12-14', 113],
  ['2014-12-15', 82],
  ['2014-12-17', 99],
  ['2014-12-19', 53],
  ['2014-12-22', 103],
  ['2014-12-23', 100],
  ['2014-12-25', 73],
  ['2014-12-26', 155],
  ['2014-12-27', 243],
  ['2014-12-28', 155],
  ['2014-12-29', 125],
  ['2014-12-30', 65]
];

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    }
  },
  grid: {
    top: '20%',
    bottom: '20%',
    left: '10%',
    right: '10%',
    containL0abel: true
  },
  xAxis: [
    {
      type: 'category',
      data: data.map(function (item) {
        return item[0];
      }),
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#333'
        }
      }
    }
  ],
  yAxis: {
    type: 'value',
    name: '(万KW)',
    axisLabel: {
      show: true,
      textStyle: {
        color: '#333'
      }
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#fff',
        width: 2
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#9DAAD5',
        width: 2
      }
    }
  },
  visualMap: [
    {
      show: false,
      // dimension: 0,
      seriesIndex: 0,
      pieces: [
        {
          gt: 0,
          lte: 50,
          color: '#096'
        },
        {
          gt: 50,
          lte: 100,
          color: '#ffde33'
        },
        {
          gt: 100,
          lte: 150,
          color: '#ff9933'
        },
        {
          gt: 150,
          lte: 200,
          color: '#fe9a8b'
        },
        {
          gt: 200,
          lte: 300,
          color: '#9E87FF'
        },
        {
          gt: 300,
          color: '#7e0023'
        }
      ]
    }
  ],
  dataZoom: [
    {
      show: false,
      startValue: '2012-01-01'
    },
    {
      type: 'inside'
    }
  ],
  series: [
    {
      xAxisIndex: 0,
      data: data.map(function (item) {
        return item[1];
      }),
      type: 'line',
      smooth: true,
      markArea: {
        data: [
          [
            {
              itemStyle: {
                color: 'rgba(0,144,255,0.3)'
              }
            },
            {
              xAxis: '2012-05-19'
            }
          ],
          [
            {
              xAxis: '2012-05-19',
              itemStyle: {
                color: 'rgba(98,69,186,0.3)'
              }
            },
            {
              xAxis: '2014-02-28'
            }
          ],
          [
            {
              xAxis: '2014-02-28',
              itemStyle: {
                color: 'rgba(255,192,5,0.3)'
              }
            },
            {}
          ]
        ]
      },
      markLine: {
        silent: true,
        data: [
          {
            yAxis: 50
          },
          {
            yAxis: 100
          },
          {
            yAxis: 150
          },
          {
            yAxis: 200
          }
        ]
      }
    }
  ]
};

二、环形图

echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

文字链接： https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501

三、k 线图

文章链接： https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501

四、折线图

echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接：https://blog.csdn.net/aibujin/article/details/140823248?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501

五、阶梯折线图

文章链接： https://blog.csdn.net/aibujin/article/details/140876408?spm=1001.2014.3001.5501

六、横向柱状图

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501

七、折线图 + 柱状图

echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501

八、3D 柱状图

echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501

九、数据量大，自动滚动，加载数据

文章链接：https://blog.csdn.net/aibujin/article/details/140922448?spm=1001.2014.3001.5501

十、工程项目可视化

echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；

文章链接： https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501

十一、雷达图

echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501

十二、象形柱图

echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501

十三、环形占比图

echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501

十四、圆环动画

echarts 圆环动画，饼图、环形图、图表动画、网格线，颜色渐变，图行矢量，文字提示框、图表层级、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501

十五、力向导图(二分图布局）

文章链接：https://blog.csdn.net/aibujin/article/details/134148974?spm=1001.2014.3001.5501
文章链接：https://blog.csdn.net/aibujin/article/details/134690784?spm=1001.2014.3001.5501
文章链接：https://blog.csdn.net/aibujin/article/details/134147640?spm=1001.2014.3001.5502

十六、地图

echarts 地图，自定义提示框；

文章链接：https://blog.csdn.net/aibujin/article/details/130532911?spm=1001.2014.3001.5501

十七、地图 json 免费下载

1. 全省份 json 下载：https://mp.csdn.net/mp_download/manage/download/UpDetailed?spm=3001.5299

2. 阿里数据可视化平台下载：http://datav.aliyun.com/portal/school/atlas/area_selector

3. https://geojson.cn/