zaibei_charts/test/digit/ChartDigit13/index.js

import ChartDigit13 from '../../../src/chart/digit/ChartDigit13/ChartDigit13.js';

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

let option = {
	title:{},
	bg:{
		backgroundColor:"#000000"
	},
	grid:{
		left: "10%",
		right: "10%",
		top: "5%",
		bottom: "5%"
	},
	shape:{
		dis: 30, //风车距离
		box:{
			width: 120,
			margin: 120, //box间隙
			boxPadding: 10,//box内边距
		},
		title:{
			color: '#bdbdbd',
			fontSize: 14,
			fontWeight: 'normal',
		},
		content:{
			color: '#4e4e4e',
			fontSize: 14,
			fontWeight: 'normal',
		},
		splitLine:{
			color: '#4d4d4d',
			width: 2
		},
		line:{ //上下边线
			color: '#616161',
			width: 2
		},
		topCircle:{
			r: 8,
			lineWidth: 1,
			color: '#616161',
		},
		bottomCircle:{
			r: 5,
			lineWidth: 1,
			color: '#616161',
		},
		fontStyle:{
			color: '#ffffff',
			fontSize: 12,
			fontWeight: 'normal',
		}
	},
	
	series: [{
			date: '2013',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2014',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2015',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2016',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		}
	],
	color: ['#9a37da','#3c8bef','#3cefe4','#3cef9d','#eec933','#d97b36','#ff4e4e']
};
let option2 = {
	title:{},
	bg:{
		backgroundColor:"#000000"
	},
	grid:{
		left: "10%",
		right: "10%",
		top: "5%",
		bottom: "5%"
	},
	shape:{
		dis: 30, //风车距离
		box:{
			height: 70,
			margin: 20, //box间隙
			boxPadding: 10,//box内边距
		},
		title:{
			color: '#bdbdbd',
			fontSize: 14,
			fontWeight: 'normal',
		},
		content:{
			color: '#4e4e4e',
			fontSize: 14,
			fontWeight: 'normal',
		},
		splitLine:{
			color: '#4d4d4d',
			width: 2
		},
		line:{ //上下边线
			color: '#616161',
			width: 2
		},
		fontStyle:{
			color: '#ffffff',
			fontSize: 12,
			fontWeight: 'normal',
		}
	},
	
	series: [{
			date: '2013',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2014',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2015',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2016',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2017',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2018',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2019',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2014',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2015',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2016',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
		{
			date: '2017',
			title:'万博思图',
			content: '万博思图作为数据可视化。。。'
		},
	],
	color: ['#9a37da','#3c8bef','#3cefe4','#3cef9d','#eec933','#d97b36','#ff4e4e']
};

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