zaibei_charts/test/center/ChartCenterLine1/index.js

// import Chart1 from "../../../src/chart/center/ChartCenterLine1/ChartCenterLine1";
import Chart2 from "../../../src/chart/center/ChartCenterLine1/ChartCenterLine1";
import Title from "../../../src/chart/commonOptions/title";
// let bar1 = new Chart1(document.querySelector(".c1"), {});
let bar2 = new Chart2(document.querySelector(".c2"), {});
// bar2.setZoomCallBack(bar1.setZoomSlider);
window.addEventListener("resize", function () {
    // bar1.resize();
    bar2.resize()
});
window.addEventListener("elementClick",(data)=>{
    console.log(data)
})
setTimeout(()=>{
    bar2.setOption( {
        color: ['#00deff','#3f90ff','#00f6ff','#0096ff','#d0e3ff','#4169e1','#00bfff','#008b8b','#00fa9a','#0000ff'],
        title: Title.option(''),
        bg: {
            backgroundColor: '#062541',
        },
        grid1:{
            left:"18%",
            right:"18%",
            top:"10%",
            bottom:"62%"
        },
        grid2:{
            left:"18%",
            right:"18%",
            top:"54%",
            bottom:"26%"
        },
        legend1:{
            itemHeight: 10,
            itemWidth: 10,
            itemAngelR: 20,
            left:'18%',
            top:'4%',
            textStyle:{
                color: '#8ca6ad'
            }
        },
        legend2: {
            itemHeight: 10,
            itemWidth: 10,
            itemAngelR: 20,
            left:'18%',
            top:'48%',
            textStyle:{
                color: '#8ca6ad'
            }
        },
        dataZoom:{
            show:true,
            position:"85%",
            zoomHeight:33,
            zoomMaskColor:"rgba(14,74,227,0.1)",
            zoomBackgroundColor:"rgba(0,0,0,0)",
            zoomAreaColor:"rgba(4,66,99,0.8)",
            zoomLineColor:"rgba(4,66,99,0.8)",
            zoomHandleColor:"#00deff"
        },
        tooltip: {
            // titleColor:'#fff',
            bgStyle:{
                backgroundColor:'rgba(0,0,0,0.7)',
                // borderColor:'#888e0e',
                // borderWidth:1
            },

        },


        xAxis1: {
            type: "category",
            // title: '日期',
            nameTextStyle: {
                fontSize: 12,
                color: '#797979',
            },
            namePosition: 'end',
            // data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", '八月', '九月', '十月', '十一月', '十二月'],
            data: ['2011','2012','2013','2014','2015','2016','2017','2018','2019'],
            // boundaryGap: true,
            //		scale: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#275176',
                    // opacity: 0.3,
                    width: 4,
                    // type: 'solid'
                }
            },
            axisTick: {
                show: false,
                alignWithLabel: false,
                //			interval: 'auto'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)',
                    // opacity: 0.3,
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: {
                show: true,
                margin:5,
                textStyle: {
                    color: '#797979',
                    textRotation: 0
                }
            }
        },
        yAxis1: {
            type: 'value',
            title: '',
            splitNumber:2,
            nameTextStyle: {
                fontSize: 12,
                color: '#797979',
            },
            namePosition: 'end',
            scale: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#275176',
                    opacity: 0.3,
                    width: 4,
                    type: 'solid'
                }
            },
            axisTick: {
                show: false,
                alignWithLabel: true,
                interval: 'auto',
                lineStyle: {
                    color: '#ffffff',
                    opacity: 0.3,
                    width: 1
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ffffff',
                    opacity: 0.3,
                    width: 1,
                    type: 'solid'
                }
            },

            axisLabel: {
                show: true,
                format:true,
                textStyle: {
                    color: '#797979'
                }
            }

        },


        xAxis2: {
            type: "category",
            // title: '日期',
            nameTextStyle: {
                fontSize: 12,
                color: '#ccc',
            },
            namePosition: 'end',
            // data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", '八月', '九月', '十月', '十一月', '十二月'],
            data: ['2011','2012','2013','2014','2015','2016','2017','2018','2019'],
            boundaryGap: true,
            //		scale: true,
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)',
                    width: 2,
                    type: 'solid'
                }
            },
            axisTick: {
                show: false,
                alignWithLabel: true,
                length: -2,
                lineStyle:{
                    width:2,
                    color:'rgba(255,255,255,0.1)',
                    // opacity: 0.1,
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#797979',
                    backgroundColor: 'rgba(255,255,255,0.05)',
                    highlightColor: '#ffffff',
                    textRotation:0,
                }
            }
        },
        yAxis2: {
            type: 'value',
            title: '',
            splitNumber:2,
            nameTextStyle: {
                fontSize: 12,
                color: '#606060',
            },
            namePosition: 'end',
            scale: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)',
                    width: 1,
                    type: 'solid',
                    distance: 2, //偏移距离
                }
            },
            axisTick: {
                show: true,
                alignWithLabel: false,
                length:-5,
                lineStyle:{
                    width:2,
                    color:'rgba(255,255,255,0.1)',
                    // opacity: 0.1,
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)',
                    // opacity: 0.2,
                    width: 1,
                    type: 'solid'
                }
            },

            axisLabel: {
                show: true,
                textStyle: {
                    color: '#606060'
                }
            }

        },
        shape:{
            label: {
                show: false,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: ''
                }
            },
            lineStyle: {
                width: 2,
                smooth: 'spline',
            },
            lineShadow: {
                // shadowColor: '#000000',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5
            },
            circleSize: 5,
            bgGrid:{
                color: 'rgba(255,255,255,0.05)',
            }
        },

        series: [
            {
                name: '类别一',
                type: 'main',
                data: [0.45, 0.51, 0.67, 0.64, 0.55, 0.31, 0.57, 0.87, 0.89],
            },
            {
                name: '类别二',
                type: 'bar',
                data: [0.35,0.2, 0.25, 0.34, 0.3, 0.15, 0.16, 0.21, 0.27],
            },
            {
                name: '类别三',
                type: 'bar',
                data: [0.1, 0.31, 0.42, 0.3, 0.25, 0.16, 0.41, 0.66, 0.62],
            }
        ]
    })
},2400)