zaibei_charts/test/line/ChartLine11/index.js

import ChartLine from '../../../src/chart/line/ChartLine11/ChartLine11.js';
import Title from "../../../src/chart/commonOptions/title";
import Grid from "../../../src/chart/commonOptions/grid";
import ToolTip from "../../../src/chart/commonOptions/tooltip";

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


// let option = {
//     color: ['#c6b146','#ffffff','#94ddf3', '#18c1f1', '#ed9c01', '#d0e3ff', '#00bfff', '#008b8b', '#00fa9a', '#0000ff'],
//     title: Title.option(''),
//     bg: {
//         backgroundColor: '#101029'
//     },
//     grid: Grid.option,
//     tooltip: {
// //		dangerline: {
// //			show: true,
// //			dangerData: 8
// //		},
// //		targetline: {
// //			show: true,
// //			targetData: 12
// //		},
// //		guideline: {
// //			show: true,
// //			color: '#ccc'
// //		}
//         backgroundColor: '#ffffff',
//         opacity: 0.05
//     },
//     legend: {
//         itemHeight: 10,
//         itemWidth: 10,
//         itemAngelR: 20,
//         left:'22%',
//         top:'8%'
//     },
//     xAxis: {
//         type: "category",
// 		// title: '日期',
//         nameTextStyle: {
//             fontSize: 12,
//             color: '#797979',
//         },
//         namePosition: 'end',
//         // data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", '八月', '九月', '十月', '十一月', '十二月'],
//         data: ['2012','2013','2014','2015','2016','2017','2018','2019'],
//         boundaryGap: false,
//         //		scale: true,
//         axisLine: {
//             show: true,
//             lineStyle: {
//                 color: '#ffffff',
//                 opacity: 0.3,
//                 width: 4,
//                 type: 'solid'
//             }
//         },
//         axisTick: {
//             show: false,
//             alignWithLabel: false,
//             //			interval: 'auto'
//         },
//         splitLine: {
//             show: true,
//             lineStyle: {
//                 color: '#ffffff',
//                 opacity:0.05,
//                 width: 1,
//                 type: 'solid'
//             }
//         },
//         axisLabel: {
//             show: true,
//             textStyle: {
//                 color: '#797979',
//                 textRotation:30
//             }
//         }
//     },
//     yAxis: {
//         type: 'value',
// 		title: '单位',
//         nameTextStyle: {
//             fontSize: 12,
//             color: '#797979',
//         },
//         namePosition: 'end',
//         scale: true,
//         axisLine: {
//             show: true,
//             lineStyle: {
//                 color: '#ffffff',
//                 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.05,
//                 width: 1,
//                 type: 'solid'
//             }
//         },

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

//     },
//     shape:{
//         label: {
//             show: false,
//             textStyle: {
//                 fontSize: 12,
//                 fontWeight: 'normal',
//                 color: ''
//             }
//         },

//         lineStyle: {
//             width: 2,
//             smooth: false,

//         },
//         lineShadow: {
//             shadowColor: '#000000',
//             shadowOffsetX: 0,
//             shadowOffsetY: 0,
//             shadowBlur: 0
//         },
//         iconType: 'circle',
//         circleSize: 2,
//         circleFill: '#ffffff',
//     },
//     series: [
//         {
//             name: '类别一',
//             type: 'bar',
//             data: [4.1, 3.9, 3.7, 3.95, 3.3, 3.5, 2.9, 2.2],
//         }, {
//             name: '类别二',
//             type: 'bar',
//             data: [3, 3.5, 2.9, 3.1, 3, 3.2, 2.5, 3.3],
//         }
//         // {
//         //     name: '目标值',
//         //     type: 'bar',
//         //     data: [810000, 1200000, 1600000, 2100000, 2560000, 3000000, 3400000, 3900000, 4330000, 4760000, 5340000, 5900000],
//         // }, {
//         //     name: '实际值',
//         //     type: 'bar',
//         //     data: [610000, 1000000, 1800000, 2200000, 2400000, 2600000, 3050000, 3590000, 4220000, 4860000, 5640000, 6800000],
//         // }, {
//         //     name: '同期值',
//         //     type: 'bar',
            
//         //     data: [510000, 800000, 1200000, 1700000, 2200000, 2500000, 2800000, 3390000, 3850000, 4660000, 5040000, 5300000],
//         // }
//     ]
// };

// let option2 = {
//     color: ['#c6b146','#ffffff','#94ddf3', '#18c1f1', '#ed9c01', '#d0e3ff', '#00bfff', '#008b8b', '#00fa9a', '#0000ff'],
//     title: Title.option(''),
//     bg: {
//         backgroundColor: '#101029'
//     },
//     grid: Grid.option,
//     tooltip: {
// //		dangerline: {
// //			show: true,
// //			dangerData: 8
// //		},
// //		targetline: {
// //			show: true,
// //			targetData: 12
// //		},
// //		guideline: {
// //			show: true,
// //			color: '#ccc'
// //		}
//         backgroundColor: '#ffffff',
//         opacity: 0.05
//     },
//     legend: {
//         itemHeight: 10,
//         itemWidth: 10,
//         itemAngelR: 20,
//         left:'22%',
//         top:'8%'
//     },
//     xAxis: {
//         type: "category",
// 		// title: '日期',
//         nameTextStyle: {
//             fontSize: 12,
//             color: '#797979',
//         },
//         namePosition: 'end',
//         // data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", '八月', '九月', '十月', '十一月', '十二月'],
//         data: ['2012','2013','2014','2015','2016','2017','2018','2019'],
//         boundaryGap: false,
//         //		scale: true,
//         axisLine: {
//             show: true,
//             lineStyle: {
//                 color: '#ffffff',
//                 opacity: 0.3,
//                 width: 4,
//                 type: 'solid'
//             }
//         },
//         axisTick: {
//             show: false,
//             alignWithLabel: false,
//             //			interval: 'auto'
//         },
//         splitLine: {
//             show: true,
//             lineStyle: {
//                 color: '#ffffff',
//                 opacity:0.05,
//                 width: 1,
//                 type: 'solid'
//             }
//         },
//         axisLabel: {
//             show: true,
//             textStyle: {
//                 color: '#797979',
//                 textRotation:30
//             }
//         }
//     },
//     yAxis: {
//         type: 'value',
// 		title: '单位',
//         nameTextStyle: {
//             fontSize: 12,
//             color: '#797979',
//         },
//         namePosition: 'end',
//         scale: true,
//         axisLine: {
//             show: true,
//             lineStyle: {
//                 color: '#ffffff',
//                 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.05,
//                 width: 1,
//                 type: 'solid'
//             }
//         },

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

//     },
//     shape:{
//         label: {
//             show: false,
//             textStyle: {
//                 fontSize: 12,
//                 fontWeight: 'normal',
//                 color: ''
//             }
//         },

//         lineStyle: {
//             width: 2,
//             smooth: false,

//         },
//         lineShadow: {
//             shadowColor: '#000000',
//             shadowOffsetX: 0,
//             shadowOffsetY: 0,
//             shadowBlur: 0
//         },
//         iconType: 'trigon',
//         circleSize: 10,
//         circleFill: '#ffffff',
//     },
//     series: [
//         {
//             name: '类别一',
//             type: 'bar',
//             data: [4.1, 3.9, 3.7, 3.95, 3.3, 3.5, 2.9, 2.2],
//         }, {
//             name: '类别二',
//             type: 'bar',
//             data: [3, 3.5, 2.9, 3.1, 3, 3.2, 2.5, 3.3],
//         }
//         // {
//         //     name: '目标值',
//         //     type: 'bar',
//         //     data: [810000, 1200000, 1600000, 2100000, 2560000, 3000000, 3400000, 3900000, 4330000, 4760000, 5340000, 5900000],
//         // }, {
//         //     name: '实际值',
//         //     type: 'bar',
//         //     data: [610000, 1000000, 1800000, 2200000, 2400000, 2600000, 3050000, 3590000, 4220000, 4860000, 5640000, 6800000],
//         // }, {
//         //     name: '同期值',
//         //     type: 'bar',
            
//         //     data: [510000, 800000, 1200000, 1700000, 2200000, 2500000, 2800000, 3390000, 3850000, 4660000, 5040000, 5300000],
//         // }
//     ]
// };

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

// setTimeout(()=>{
//     chart.setOption(option2)
// },4000)