Echarts在线免费图表

 
            option = {
   backgroundColor:'#012c66',
    grid: {
        top: '17%',
        left: '5%',
        right: '5%',
        bottom: '4%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: "rgba(1, 13, 19, 0.5)",
        borderWidth: 1,
        axisPointer: {
            type: 'shadow',
            // label: {
            //   show: true,
            // },
        },
        formatter: function (params) {
            var str = "";
            if (params.length > 0) {
                str = params[0].name + "<br/>"
            }
            for (var i = 0; i < params.length; i++) {
                if (params[i].seriesName !== "") {
                    str +=
                        params[i].seriesName +
                        '：' +
                        params[i].value +
                        "<br/>";
                }
            }
            return str;
        },
        textStyle: {
            color: "rgba(212, 232, 254, 1)",
            // fontSize: fontChart(0.24),
        },
        transitionDuration: 0,
        extraCssText: "z-index:2"
    },
    legend: {
        left: "center",
        top: 30,
        itemWidth: 15,
        itemHeight: 10,
        itemGap: 15,
        borderRadius: 4,
        textStyle: {
            color: "#fff",
            fontFamily: "Microsoft YaHei",
            fontSize: 14,
            fontWeight: 400,
        },
    },
    xAxis: {
        type: 'category',
        data: ["08-05", "08-06", "08-07", "08-08", "08-09", "08-10"],
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff', //X轴文字颜色
                fontSize: '14'
            },
        },
    },
    yAxis: [
        {
            type: 'value',
            name: '',
            nameGap: 30,  // 表现为上下位置
            nameTextStyle: {
                padding: [0, 0, 0, -30],
                color: "#fff",
                fontFamily: "Alibaba PuHuiTi",
                fontSize: 14,
                fontWeight: 600,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.08)',
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: '14'
                },
            },
        }
    ],
    series: [
        {
            name: '机构',
            type: 'bar',
            barWidth: 6,
            itemStyle: {
                normal: {
                    color: '#00A8FF',
                },
            },
            data: [200, 400, 240, 235, 465, 124],
        },
        {
            name: '用户',
            type: 'bar',
            barWidth: 6,
            itemStyle: {
                normal: {
                    color: '#FFD200',
                },
            },
            data: [634, 575, 345, 757, 235, 577],
        }, {
            name: '数据项',
            type: 'bar',
            barWidth: 6,
            itemStyle: {
                normal: {
                    color: '#00A36F',
                },
            },
            data: [124, 466, 235, 547, 124, 124],
        },
        {
            name: '趋势',
            type: 'line',
            // showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
                //折线拐点标志的样式
                color: 'white',
                borderWidth: '2',
                borderColor: '#00FFFF',
            },
            lineStyle: {
                color: '#00FFFF',
            },
            data: [436, 456, 235, 457, 213, 353],
        }
    ],
};