zaibei_charts/test/bar/ChartBar17/index.js

import Chart from "../../../src/chart/bar/ChartBar17/ChartBar17";
import option from "../../../src/option/globalDefaultOption";
// import bar15 from "./ChartBar15_1eba2";

const consoleWarn = window.console.warn;
window.console.warn = function() {
    const string = arguments[0];
    const filterStrings = [
        'is not power of two',
        'image is too big',
        'marked for update',
        'can\'t invert matrix'
    ];
    // filter warnings containing above strings
    const shouldBeFiltered = filterStrings.some(string => (
        arguments[0].includes('THREE') && arguments[0].includes(string)
    ));
    if (shouldBeFiltered) {
        // console.log("find",arguments[0])

        // log it to console without second argument, which contains reference to `image`
        // consoleWarn.call(null, arguments[0]);
    } else {
        // pass other warnings without changes
        consoleWarn.apply(null, arguments);
    }
};
let bar=new Chart(document.querySelector(".c1"),{});
window.addEventListener("resize",function () {
    bar.resize()
})
let changeOpt = {
    color: ['#0a73dc', '#04a2ae', '#424a95', '#2a7ebe', '#113b85', '#a2f9ff', '#01a0c8', '#5879c0', '#74e9f2', '#126087', '#99b5da'],
        bg: {
            backgroundColor: "#000000"
        },
        legend: {
            show: true,
            left: "70%",
            top: '5%',
            orient: 'horizontal',
            itemWidth: 8,
            itemHeight: 8,
            borderRadius: 0,
            textStyle: {
                fontSize: 14,
                color: "#ffffff"
            }
        },
        tooltip: {
            show: true,
            paddingW:10,
            paddingH: 10,
            itemGap: 2,
            //距目标的偏移值
            offsetX: 15,
            offsetY: 0,
            titleFontSize:14,
            titleColor: '#ff0000',
            itemFontSize:12,
            itemColor:"#ffffff",
            borderColor: '#ccc',
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0)',

        },
        grid: {
            left: "0%",
            right: "20",
            top: "20%",
            bottom: "40%"
        },
        valueAxis: {
            textStyle: {
                fontSize: 12,
                color: "#ffffff",
                shadowBlur: 5,
                shadowColor: "#ff0000"
            }
        },
        categoryAxis: {
            textStyle: {
                fontSize: 14,
                color: "#ffffff",
                shadowBlur: 0,
                shadowColor: "#ffffff"
            },
            // data: ["小米", "华为", "苹果", "三星", "vivo", "oppo"]
            data: ["小米", "华为", "苹果", "三星", "vivo", "oppo"]
        },
        series: [
        //     {
        //     name: "一季度销量",
        //     data: [639539, 548671, 457822, 223133, 158514, 122348]
        // },
            {
                name: "二季度销量",
                data: [581244, 0, 512544, 223133, 158514, 122348]
            }
        ]
}
const option2 = {
    color: ['#0a73dc', '#04a2ae', '#424a95', '#2a7ebe', '#113b85', '#a2f9ff', '#01a0c8', '#5879c0', '#74e9f2', '#126087', '#99b5da'],
    bg: {
        backgroundColor: "#000000"
    },
    legend: {
        show: true,
        left: "60%",
        top: '15%',
        orient: 'horizontal',
        itemWidth: 8,
        itemHeight: 8,
        borderRadius: 0,
        textStyle: {
            fontSize: 24,
            color: "#ffffff",
            fontWeight:'bold'
        }
    },
    tooltip: {
        show: true,
        paddingW:10,
        paddingH: 10,
        itemGap: 2,
        //距目标的偏移值
        offsetX: 15,
        offsetY: 0,
        titleFontSize:14,
        titleColor: '#ff0000',
        itemFontSize:12,
        itemColor:"#ffffff",
        borderColor: '#ccc',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0)',

    },
    // grid: {
    //     left: "1%",
    //     right: "10",
    //     top: "10%",
    //     bottom: "10%"
    // },
    grid:{
        left:"20%",
        right:"20%",
        top:"20%",
        bottom:"15%"
      },
    valueAxis: {
        textStyle: {
            fontSize: 12,
            color: "#ffffff",
            shadowBlur: 5,
            shadowColor: "#ff0000"
        }
    },
    categoryAxis: {
        textStyle: {
            fontSize: 14,
            color: "#ffffff",
            shadowBlur: 0,
            shadowColor: "#ffffff"
        },
        // data: ["小米", "华为", "苹果", "三星", "vivo", "oppo",'魅族']
        // data: ["小米", "华为", "苹果", "三星", "vivo", "oppo"]
        data: ["小米", "华为", "苹果", "三星"]
    },
    series: [
        {
        name: "一季度销量",
        // data: [6395390, 0, 4578220,563334, 512544, 496554,23234]
        // data: [6395390, 0, 4578220,563334, 512544, 496554]
        data: [581244, 563334, 512544, 496554]
    },
        // {
        //     name: "二季度销量",
        //     data: [581244, 563334, 512544, 496554, 407788, 368555]
        // }
    ]
};
// setTimeout(()=>{
//     bar.setOption(option2);
// },5000)
// let p;
// setTimeout(()=>{
//     bar.setOption({
//         color: ['#0a73dc', '#04a2ae', '#424a95', '#2a7ebe', '#113b85', '#a2f9ff', '#01a0c8', '#5879c0', '#74e9f2', '#126087', '#99b5da'],
//         bg: {
//             backgroundColor: "#000000"
//         },
//         legend: {
//             show: true,
//             left: "70%",
//             top: '5%',
//             orient: 'horizontal',
//             itemWidth: 8,
//             itemHeight: 8,
//             borderRadius: 0,
//             textStyle: {
//                 fontSize: 14,
//                 color: "#ffffff"
//             }
//         },
//         tooltip: {
//             show: true,
//             paddingW:10,
//             paddingH: 10,
//             itemGap: 2,
//             //距目标的偏移值
//             offsetX: 15,
//             offsetY: 0,
//             titleFontSize:14,
//             titleColor: '#ff0000',
//             itemFontSize:12,
//             itemColor:"#ffffff",
//             borderColor: '#ccc',
//             borderWidth: 0,
//             backgroundColor: 'rgba(255,255,255,0)',

//         },
//         grid: {
//             // left: "0%",
//             // right: "20",
//             // top: "20%",
//             // bottom: "40%"
//             left: "20%",
//         right: "20",
//         top: "20%",
//         bottom: "20%"
//         },
//         valueAxis: {
//             textStyle: {
//                 fontSize: 12,
//                 color: "#ffffff",
//                 shadowBlur: 5,
//                 shadowColor: "#ff0000"
//             }
//         },
//         categoryAxis: {
//             textStyle: {
//                 fontSize: 14,
//                 color: "#ffffff",
//                 shadowBlur: 0,
//                 shadowColor: "#ffffff"
//             },
//             data: ["小米", "华为", "苹果", "三星"]
//         },
//         series: [{
//             name: "一季度销量",
//             data: [639539, -548671, 457822, 223133]
//         },
//             // {
//             //     name: "二季度销量",
//             //     data: [581244, 563334, 512544, 496554, 407788, 368555]
//             // }
//         ]
//     })
// },4000);
//
// setTimeout(()=>{
//     bar.setCameraPosition(p);
// },4000);