Echarts在线免费图表

 
            var Categorys = ['总行', '杭州分行', '南京分行', '北京分行', '宁波分行', '上海分行','广州分行','深圳分行','济南分行','西安分行','成都分行','温州分行','苏州分行','重庆分行','天津分行']
var SeriesData =  [180, 160, 155, 158, 130, 151,180, 160, 155, 158, 130, 151,149,180,188]
var SeriesValues = [99,25,36,33,44,55,6,66,79,19,90,29,10,46,17]
var YAxisName1 = '终端数量'
var YAxisName2 = '合规占比'
var backgroundColors = 'rgba(233, 240, 255, 0)'
option = {
    backgroundColor: backgroundColors,
    tooltip: {
        trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
        axisPointer: {     // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
        },
    },
    grid: {
        top: '10%',
        left: '5%',
        right: '5%',
        bottom: '5%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
        containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
    },
    animation: true,

    xAxis: [
        {
            type: 'category',
            data: Categorys,
            axisLine: {
                show: true,
                onZero: true,
                symbol: "none",
                lineStyle: {
                    color: "#264981"
                }
            },
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#333639',
                    fontWeight: 500,
                    fontSize: '14'
                }
            },
            axisTick: {
                show: false
            },
        }, {
            type: 'category',
            data: Categorys,
            axisLine: {
                show: true,
                onZero: true,
                symbol: "none",
                lineStyle: {
                    color: "rgb(21,93,174)"
                }
            },
            boundaryGap: false,
            axisLabel: {
                show: false,
                textStyle: {
                    color: 'rgba(233, 240, 255, 1)',
                    fontWeight: 500,
                    fontSize: '14'
                }
            },
            axisTick: {
                show: false
            },
        },
    ],
    yAxis: [
        {
            name: YAxisName1,
            nameTextStyle: {
                color: '#333639',
                fontSize: 14,
                padding: 10,
            },
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgb(21,93,174)'
                },
            },
            axisTick: {
                show: false,
                inside: true,
                length: 7
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#333639'
                }
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333639',
                    fontSize: 14
                }
            },
        },
        {
            name: YAxisName2,
            nameTextStyle: {
                color: '#333639',
                fontSize: 14,
                padding: 10,
            },
            min: 0,//最小
            max: 100,//最大
            type: 'value',
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgb(21,93,174)'
                }
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333639',
                    fontSize: 14
                },
                formatter: '{value}%'
            },
        },
    ],
    series: [
        {
            data: SeriesData,
            type: 'bar',
            name: YAxisName1,
            yAxisIndex: 0,
            xAxisIndex: 0,
            //坐标轴显示器的文本标签
            label: {
                show: false,
            },
            barGap: '120%',
            barWidth: 25,
            //柱条颜色
            itemStyle: {
                color: '#07BCE7',
                borderColor: 'rgba(0,128,3,55)',
                borderRadius: [3, 3, 3, 3],
            },
            animationEasing: "linear",
            animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
            animationDurationUpdate: 300,  //数据更新动画的时长
            animation: true,  //开启动画
            animationDuration: 0,
            z: 1,
            label: {
            show: true,
            position: 'top', // 位置
            color: '#333639',
            fontSize: 14,
            distance: 10 // 距离
         }, // 柱子上方的数值
        },
        {
            name: YAxisName2,
            type: "line",
            showAllSymbol: true, //显示所有图形。
            yAxisIndex: 1,
            xAxisIndex: 1,
            //symbol: 'none', //标记的图形为实心圆
            symbolSize: 0,
            z: 150,
            zlevel: 25,
            itemStyle: {
                color: '#333',//拐点颜色
                borderWidth: 2,
                borderColor: 'rgba(27,204,102)',
            },
            lineStyle: {
                color: '#287CE8',
            },
            smooth: true,
            data: SeriesValues,
            label: {
               show: true,
               formatter: "{a|{c}%}",
               position: 'top',
               rich: {
                  a: {
                     color: "#333639",
                     fontSize: 14,
                     lineHeight: 24,
                     height: 24,
                  },
               },
               position: "top",
               textStyle: {
                  color: "#333639",
                  fontSize: 14,
               },
		},
        },
    ],
}