zaibei_charts/test/line/ChartLine15/index.js

import ChartLine from '../../../src/chart/line/ChartLine15/ChartLine15.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: ['#ffffff','#3fffa7','#3f90ff','#00f6ff','#0096ff','#d0e3ff','#4169e1','#00bfff','#008b8b','#00fa9a','#0000ff'],
    title: {},
    bg: {
        backgroundColor: '#000000'
    },
    grid: Grid.option,
    tooltip: { 
        titleColor:'#fff',
        bgStyle:{
            backgroundColor:'rgba(255,255,255,0.2)',
            // borderColor:'#888e0e',
            // borderWidth:1
        },
        nameColor:'#ffda2a',
        valueColor:'#ffda2a'

    },
    legend: {
        itemHeight: 10,
        itemWidth: 10,
        itemAngelR: 20,
        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','2017','2014','2015','2016','2017',],
        boundaryGap: true,
        //		scale: true,
        axisLine: {
            show: false,
            lineStyle: {
                color: '#ffffff',
                opacity: 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(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,
                margin: 4,
            }
        }
    },
    yAxis: {
        type: 'value',
		title: '单位',
        nameTextStyle: {
            fontSize: 12,
            color: '#606060',
        },
        namePosition: 'end',
        scale: true,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                opacity: 0.2,
                width: 1,
                type: 'solid',
                distance: 2, //偏移距离
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: false,
            length:-5,
            lineStyle:{
                width:2,
                color:'#ffffff',
                opacity: 0.1,
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,0.2)',
                width: 1,
                type: 'solid'
            }
        },

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

    },
    shape:{
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''
            }
        },
        lineStyle: {
            width: 4,
            smooth: 'spline',
        },
        lineShadow: {
            // shadowColor: '#000000',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 5
        },
        circleSize: 5,
        bgGrid:{
            color: '#ffffff',
            opacity: 1,
        }
    },
    series: [
        {
            name: '类别一',
            type: 'bar',
            data: [800, 900, 600, 1200, 1300, 900, 1000,1200, 1300, 900, 1000,],
        }, {
            name: '类别二',
            type: 'bar',
            
            data: [1200, 1400, 650, 950, 1600, 1400, 1000,950, 1600, 1400, 1000],
        }
    ]
};