123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- import ChartLine from '../../../src/chart/line/ChartLine13/ChartLine13.js';
- import Grid from '../../../src/chart/commonOptions/grid'
-
- let chart = new ChartLine(document.getElementsByClassName('c1')[0], {});
- window.addEventListener('resize', () => {
- chart.resize();
- });
-
- let option = {
- color: ['#9df04d','#ffffff','#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.05)',
-
-
- },
- nameColor:'#ffda2a',
- valueColor:'#ffda2a'
-
- },
- legend: {
- itemHeight: 10,
- itemWidth: 10,
- itemAngelR: 20,
- left:'22%',
- top:'8%'
- },
- xAxis: {
- type: "category",
-
- nameTextStyle: {
- fontSize: 12,
- color: '#ccc',
- },
- namePosition: 'end',
-
- data: ['2011','2012','2013','2014','2015','2016','2017','2018','2019'],
- boundaryGap: true,
-
- axisLine: {
- show: true,
- lineStyle: {
- color: '#ffff00',
- opacity: 0.3,
- width: 2,
- type: 'solid'
- }
- },
- axisTick: {
- show: true,
- alignWithLabel: true,
- length:30,
- topTickDis: 30,
- lineStyle:{
- width:2,
- color:'#ffff00',
- opacity: 0.1,
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#ffffff',
- opacity: 0.05,
- width: 1,
- type: 'solid'
- }
- },
- axisLabel: {
- show: false,
- textStyle: {
- color: '#797979',
- backgroundColor: 'rgba(255,255,255,0.1)',
- highlightColor: '#ffffff',
- textRotation:0
- }
- }
- },
- yAxis: {
- type: 'value',
- title: '单位',
- nameTextStyle: {
- fontSize: 12,
- color: '#606060',
- },
- namePosition: 'end',
- scale: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: '#ffffff',
- opacity: 0.3,
- width: 2,
- type: 'solid',
- distance: 10,
- }
- },
- axisTick: {
- show: true,
- alignWithLabel: false,
- length:5,
- lineStyle:{
- width:2,
- color:'#fffe00'
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#ffffff',
- opacity: 0.05,
- width: 1,
- type: 'solid'
- }
- },
-
- axisLabel: {
- show: true,
- textStyle: {
- color: '#606060'
- }
- }
-
- },
- shape:{
- label: {
- show: true,
- textStyle: {
- fontSize: 12,
- fontWeight: 'normal',
- color: ''
- }
- },
- lineStyle: {
- width: 4,
- smooth: 'spline',
- },
- lineShadow: {
- shadowColor: '#000000',
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 0
- },
- circleSize: 5,
- },
- series: [
-
-
-
-
-
-
-
-
-
-
- {
- name: '类别一',
- type: 'bar',
- data: [810000, 1200000, 1600000, 2100000, 2560000, 3000000, 3400000, 3900000, 4330000],
- }, {
- name: '类别二',
- type: 'bar',
- data: [610000, 1000000, 1800000, 2200000, 2400000, 2600000, 3050000, 3590000, 4220000],
- },
- ]
- };
-
- let option1 = {
- color: ['#9df04d','#ffffff','#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.05)',
-
-
- },
- nameColor:'#ffda2a',
- valueColor:'#ffda2a'
-
- },
- legend: {
- itemHeight: 10,
- itemWidth: 10,
- itemAngelR: 20,
- left:'22%',
- top:'8%'
- },
- xAxis: {
- type: "category",
-
- nameTextStyle: {
- fontSize: 12,
- color: '#ccc',
- },
- namePosition: 'end',
-
- data: ['2011','2012','2013','2014','2015','2016','2017','2018','2019'],
- boundaryGap: true,
-
- axisLine: {
- show: true,
- lineStyle: {
- color: '#ffff00',
- opacity: 0.3,
- width: 2,
- type: 'solid'
- }
- },
- axisTick: {
- show: true,
- alignWithLabel: true,
- length:30,
- topTickDis: 30,
- lineStyle:{
- width:2,
- color:'#ffff00',
- opacity: 0.1,
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#ffffff',
- opacity: 0.05,
- width: 1,
- type: 'solid'
- }
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#797979',
- backgroundColor: 'rgba(255,255,255,0.1)',
- highlightColor: '#ffffff',
- textRotation:0
- }
- }
- },
- yAxis: {
- type: 'value',
- title: '单位',
- nameTextStyle: {
- fontSize: 12,
- color: '#606060',
- },
- namePosition: 'end',
- scale: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: '#ffffff',
- opacity: 0.3,
- width: 2,
- type: 'solid',
- distance: 10,
- }
- },
- axisTick: {
- show: true,
- alignWithLabel: false,
- length:10,
- lineStyle:{
- width:2,
- color:'#fffe00'
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#ffffff',
- opacity: 0.05,
- width: 1,
- type: 'solid'
- }
- },
-
- axisLabel: {
- show: true,
- textStyle: {
- color: '#606060'
- }
- }
-
- },
- shape:{
- label: {
- show: true,
- textStyle: {
- fontSize: 12,
- fontWeight: 'normal',
- color: ''
- }
- },
- lineStyle: {
- width: 4,
- smooth: 'spline',
- },
- lineShadow: {
- shadowColor: '#000000',
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 0
- },
- circleSize: 5,
- },
- series: [
-
-
-
-
-
-
-
-
-
-
- {
- name: '类别一',
- type: 'bar',
- data: [810000, 1200000, 1600000, 2100000, 2560000, 3000000, 3400000, 3900000, 4330000],
- }, {
- name: '类别二',
- type: 'bar',
- data: [610000, 1000000, 1800000, 2200000, 2400000, 2600000, 3050000, 3590000, 4220000],
- },
- ]
- };
-
-
-
-
-
-
-
-
|