123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- $(function() {
- var dom = document.getElementById("container4");
- var myChart = echarts.init(dom);
- var app = {};
- option = null;
- // Generate data
- var category = [];
- var dottedBase = +new Date();
- dottedBase-=3600 * 24 * 1000*20;
- var lineData = [];
- var barData = [];
- for (var i = 0; i < 20; i++) {
- var date = new Date(dottedBase += 3600 * 24 * 1000);
- category.push([
- date.getFullYear(),
- date.getMonth() + 1,
- date.getDate()
- ].join('-'));
- var b = vm.msgCnt[i].msg;
- var d = vm.msgCnt[i].alm;
- barData.push(b)
- lineData.push(d + b);
- }
- // option
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- data: ['处理数', '报警数'],
- textStyle: {
- color: '#ccc'
- }
- },
- xAxis: {
- data: category,
- axisLine: {
- lineStyle: {
- color: '#ccc'
- }
- }
- },
- yAxis: {
- splitLine: {show: false},
- axisLine: {
- lineStyle: {
- color: '#ccc'
- }
- }
- },
- series: [{
- name: 'line',
- type: 'line',
- smooth: true,
- showAllSymbol: true,
- symbol: 'emptyCircle',
- symbolSize: 15,
- data: lineData
- }, {
- name: '报警数',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- barBorderRadius: 5,
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: '#14c8d4'},
- {offset: 1, color: '#43eec6'}
- ]
- )
- }
- },
- data: barData
- }, {
- name: '处理数',
- type: 'bar',
- barGap: '-100%',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: 'rgba(20,200,212,0.5)'},
- {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
- {offset: 1, color: 'rgba(20,200,212,0)'}
- ]
- )
- }
- },
- z: -12,
- data: lineData
- }, {
- name: 'dotted',
- type: 'pictorialBar',
- symbol: 'rect',
- itemStyle: {
- normal: {
- color: '#0f375f'
- }
- },
- symbolRepeat: true,
- symbolSize: [12, 4],
- symbolMargin: 1,
- z: -10,
- data: lineData
- }]
- };;
- if (option && typeof option === "object") {
- myChart.setOption(option, true);
- }
- })
|