zaibei_charts/test/line/ChartLine16/index.js

import ChartLine from '../../../src/chart/line/ChartLine16/ChartLine16.js';
import Grid from '../../../src/chart/commonOptions/grid'

let chart = new ChartLine(document.getElementsByClassName('c1')[0], {});
window.addEventListener('resize', () => {
    chart.resize();
});


// setTimeout(()=>{
//     chart.setOption(option)
// },2000)

let option = {
    color: ['#3fffa7','#3f90ff','#00f6ff','#0096ff','#d0e3ff','#4169e1','#00bfff','#008b8b','#00fa9a','#0000ff'],
    title: {},
    bg: {
        backgroundColor: '#000000'
    },
    grid: Grid.containLabelOption,
    tooltip: { 
        // titleColor:'#fff',
        bgStyle:{
            backgroundColor:'rgba(0,0,0,0.7)',
            // borderColor:'#888e0e',
            // borderWidth:1
        },
        nameColor:'#ffffff',
        valueColor:'#ffffff'

    },
    legend: {
        itemHeight: 10,
        itemWidth: 10,
        // itemAngelR: 0,
        left:'22%',
        top:'8%',
        textStyle:{
            color: '#ffffff'
        }
    },
    xAxis: {
        type: "category",
		// title: '日期',
        nameTextStyle: {
            fontSize: 12,
            color: '#ccc',
        },
        namePosition: 'end',
        // data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", '八月', '九月', '十月', '十一月', '十二月'],
        data: ['2011','2012','2013','2014','2015','2016','2012','2013','2014','2015','2016'],
        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: true,
            lineStyle: {
                color: 'rgba(102,102,102,0.2)',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#bdbdbd',
                backgroundColor: 'rgba(255,255,255,0.05)',
                highlightColor: 'rgba(255,255,255,0.4)',
                textRotation:0,
            }
        }
    },
    yAxis: {
        type: 'value',
		title: '单位',
        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,
        },
        bgGrid:{
            color: 'rgba(255,255,255,0.05)',
        }
    },
    series: [
        {
            name: '类别',
            type: 'bar',
            data: [110, 3, 6, 14,90, 17, 3, 6, 14,90, 17],
        }
    ]
};