Colin - 程序员的个人网站

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    title:{
        text: '近5个交易日趋势对比',
        x:'center',
        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder",}
            fontSize: 16,
            fontWeight: 'bold',
            color: "#4d4d4d",
        },
    },
    graphic:[
         {
            type: 'group',
            left: '83.1%',
            top: 44,
            children: [
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    style: {
                        fill: '#000',
                        text: [
                            '涨跌幅',
                          
                        ].join('\n'),
                        font: 'bolder 14px Microsoft YaHei',
                    }
                },
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                     top: 83,
                    style: {
                        fill: '#000',
                        text: [
                            '成交量',
                        ].join('\n'),
                        font: 'bolder 14px Microsoft YaHei',
                    }
                }
            ]
        }
    ],
    legend: {
        orient: 'vertical',  //垂直显示
        y: 40,    //延Y轴居中
        x: 'right', //居右显示
        icon: "rect",   //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
    　　itemWidth: 30,  // 设置宽度
    　　itemHeight: 8, // 设置高度
    　　itemGap: 15, // 设置间距
    　　align: 'left',//图例文字换个位置
        
        // data: ['国银租赁2','中银航空租赁2','中国船舶租赁2','恒生指数','国银租赁','中银航空租赁','中国船舶租赁'],
        data:[{
            name: "国银租赁2",
            icon: "rect",
        },{
            name: "中银航空租赁2",
            icon: "rect",
        },{
            name: "中国船舶租赁2",
            icon: "rect",
        },{
            name: "国银租赁",
            icon: "line",
        },{
            name: "中银航空租赁",
            icon: "line",
        },{
            name: "中国船舶租赁",
            icon: "line",
        },{
            name: "恒生指数",
            icon: "line"
        }],
    },
    grid:{
        right: '25%',
    },
    xAxis: [
        {
            type: 'category',
            data: ['2020-10-09', '2020-10-10', '2020-10-11', '2020-10-12', '2020-10-13'],
            axisPointer: {
                type: 'shadow'
            },
            axisLine:{
                lineStyle:{
                    color:'#A5A5A5',
                    width:1.2,

}
            },
            axisTick:{
                show:false//不显示坐标轴刻度线
            },
            splitLine:{
　　　　        show:false
　　        }   
        }
    ],
    yAxis: [
        {   
            axisLine: {
                show: false,//不显示坐标轴线
            },
            axisTick:{
                show:false//不显示坐标轴刻度线
            },
            type: 'value',
            name: '涨幅跌(%)',
            min: -10,
            max: 4,
            interval: 2,
            axisLabel: {
                formatter: '{value}'
            },
            nameTextStyle: {
                fontWeight: 'bolder',
            },
            splitLine:{
　　　　        show:false
　　        }  
        },
        {   
            axisLine: {
                show: false,//不显示坐标轴线
            },
            axisTick:{
                show:false//不显示坐标轴刻度线
            },
            type: 'value',
            name: '成交量(股)',
            min: 0,
            max: 14000000,
            interval: 2000000,
            axisLabel: {
                formatter: '{value}'
            },
            nameTextStyle: {
                fontWeight: 'bolder',
            },
            splitLine:{
　　　　        show:false
　　        }  
        }
    ],
    series: [
        {
            name: '国银租赁',
            type: 'line',
            yAxisIndex:0,
            symbol: "none",//取消拐点
            color: '#ED7D31',
            data: [ 1, 2, 2.5,3.3, -1]
        },
        {
            name: '中银航空租赁',
            type: 'line',
            color: '#A5A5A5',
            symbol: "none",
            smooth:false,
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:1,
                        type:'dashed'  //'dotted'虚线 'solid'实线
                    }
                }
            }, 
            yAxisIndex:0,
            data: [ -3, 1, 2, 2.5, 4]
        },
        {
            name: '中国船舶租赁',
            type: 'line',
            yAxisIndex:0,
            symbol: "none",
            color: '#0070C0',
            data: [2,4, 2,2.0, -1]
        },
        {
            name: '恒生指数',
            type: 'line',
            yAxisIndex:0,
            symbol: "none",
            color: 'green',
            data: [-5, 3.3, 2.5, 1, 3]
        },
        {
            name: '国银租赁2',
            type: 'bar',
            color: '#ED7D31',
            yAxisIndex:1,
            data: [1000000, 5000000, 2000000, 1500000, 2000000]
        },
        {
            name: '中银航空租赁2',
            type: 'bar',
            color: '#A5A5A5',
            barGap:'0%',//柱图间距
            yAxisIndex:1,
            data: [2000000,4000000, 4000000, 5000000, 5000000]
        },
        {
            name: '中国船舶租赁2',
            type: 'bar',
            color: '#0070C0',
            yAxisIndex:1,
            data: [1000000, 5000000, 6000000, 4000000,3000000]
        },
         
    ]
};

转化