Echarts在线免费图表

 
            const dataBJ = [
  [1, 55],
  [2, 25],
  [3, 56],
  [4, 33],
  [5, 42],
  [6, 82],
  [7, 74],
  [8, 78],
  [9, 267],
  [10, 185],
  [11, 39],
  [12, 41],
  [13, 64],
  [14, 108],
  [15, 108],
  [16, 33],
  [17, 94],
  [18, 186],
  [19, 57],
  [20, 22],
  [21, 39],
  [22, 94],
  [23, 99],
  [24, 31],
  [25, 42],
  [26, 154],
  [27, 234],
  [28, 160],
  [29, 134],
  [30, 52],
  [31, 46]
];

const schema = [
    { name: 'KW', index: 0, text: 'KW' },
    { name: 'COP', index: 1, text: 'COP' },
];
const itemStyle = {
    opacity: 0.8,
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    shadowColor: 'rgba(0,0,0,0.3)',
};
const markLineOpt = {
  animation: false,
//   label: {
//     formatter: 'y = 5 * x + 33',
//     align: 'right'
//   },
  lineStyle: {
    type: 'solid',
    color: 'red'
  },
  tooltip: {
    formatter: 'y = 5 * x + 33'
  },
  data: [
    [
      {
        coord: [3, 48],
        symbol: 'none'
      },
      {
        coord: [30, 183],
        symbol: 'none'
      }
    ]
  ]
};
option = {
    backgroundColor: '#132A7F',
    color: ['#dd4444', '#fec42c', '#80F1BE'],
    legend: {
        show: false,
    },
    grid: {
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '10%',
    },
    tooltip: {
        backgroundColor: '#1B2D56',
        borderColor: '#2BD8FB',
        textStyle: {
            color: '#fff',
        },
        formatter: function (param) {
            var value = param.value;
            // prettier-ignore
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px;">'
                                    // + param.seriesName + ' ' 
                                    + value[0] + 'KW：'
                                    + '<br>'
                                    + value[1];
                                    + '</div>'
                                    // + schema[1].text + '：' + value[1] + '<br>'
                                    // + schema[2].text + '：' + value[2] + '<br>'
                                    // + schema[3].text + '：' + value[3] + '<br>';
        },
    },
    xAxis: {
        type: 'value',
        name: 'KW',
        nameGap: 16,
        nameTextStyle: {
            fontSize: 16,
        },
        // max: 31,
        splitLine: {
            show: false,
        },
        axisLabel: {
            color: '#fff',
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#fff',
            },
        },
    },
    yAxis: {
        type: 'value',
        name: 'COP',
        nameLocation: 'end',
        nameGap: 20,
        nameTextStyle: {
            fontSize: 16,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            color: '#fff',
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#fff',
            },
        },
    },
    visualMap: [
        {
            left: 'right',
            top: '10%',
            dimension: 1,
            min: 0,
            // max: 100,
            // calculable: true,
            itemHeight: 400,
            text: ['COP'],
            textStyle: {
                color: '#fff',
            },
            inRange: {
                // color: ['lightskyblue', 'yellow', 'orangered', ]
                // color: ['blue', 'green','yellow', 'red', ]
                color: ['#0029ff','#0041fd', '#02fafe','#fbec04', '#fe0f00','#880001', ]
            },
            // textGap: 30,
            // inRange: {
            //     colorLightness: [0.9, 0.5],
            // },
            // outOfRange: {
            //     color: ['rgba(255,255,255,0.4)'],
            // },
            // controller: {
            //     inRange: {
            //         color: ['#c23531'],
            //     },
            //     outOfRange: {
            //         color: ['#999'],
            //     },
            // },
        },
    ],
    series: [
        {
            name: 'COP分析',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataBJ,
            markLine: markLineOpt
        },
    ],
};
myChart.setOption(option);