|
|
@@ -1,659 +1,659 @@
|
|
|
<template>
|
|
|
- <el-row>
|
|
|
- <el-col :span="18">
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <!-- 采购需求 -->
|
|
|
- <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
|
|
|
- <div class="itemtitle" style="">市场采购需求</div>
|
|
|
- <v-chart ref="xuqiuchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="xuqiuchart" />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <!-- 在售产品 -->
|
|
|
- <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
|
|
|
- <div class="itemtitle" style="">产品供应排行</div>
|
|
|
- <v-chart ref="goodschart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="goodschart" />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <div>
|
|
|
- <!-- 价格走势 -->
|
|
|
- <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
|
|
|
- <div class="itemtitle" style="">价格走势</div>
|
|
|
- <v-chart ref="costchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="costchart" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <!-- 市场资讯 -->
|
|
|
- <div class="chart" :style="{height:((height-80 - 20) )+'px'}">
|
|
|
- <div class="itemtitle" style="">市场资讯</div>
|
|
|
- <div>
|
|
|
- <div class="swiper-container" :style="{height:(((height-80) - 20 - 45)+'px')}">
|
|
|
- <div class="swiper-wrapper" :style="{height:(((height-80) - 20 - 45)+'px')}">
|
|
|
- <div v-for="(item,index) in news" class="swiper-slide newitem" style="height: 110px;">
|
|
|
- <div class="innner">
|
|
|
- <div class="title">{{item.title}}</div>
|
|
|
- <div class="flex">
|
|
|
- <div class="flex_item">时间：{{item.date}}</div>
|
|
|
- <div class="flex_item">来源：{{item.from_}}</div>
|
|
|
- </div>
|
|
|
- <div class="desc">
|
|
|
- {{item.desc}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <!-- 采购需求 -->
|
|
|
+ <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
|
|
|
+ <div class="itemtitle" style="">市场采购需求</div>
|
|
|
+ <v-chart ref="xuqiuchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="xuqiuchart" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <!-- 在售产品 -->
|
|
|
+ <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
|
|
|
+ <div class="itemtitle" style="">产品供应排行</div>
|
|
|
+ <v-chart ref="goodschart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="goodschart" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <!-- 价格走势 -->
|
|
|
+ <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
|
|
|
+ <div class="itemtitle" style="">价格走势</div>
|
|
|
+ <v-chart ref="costchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="costchart" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <!-- 市场资讯 -->
|
|
|
+ <div class="chart" :style="{height:((height-80 - 20) )+'px'}">
|
|
|
+ <div class="itemtitle" style="">市场资讯</div>
|
|
|
+ <div>
|
|
|
+ <div class="swiper-container" :style="{height:(((height-80) - 20 - 45)+'px')}">
|
|
|
+ <div class="swiper-wrapper" :style="{height:(((height-80) - 20 - 45)+'px')}">
|
|
|
+ <div v-for="(item,index) in news" class="swiper-slide newitem" style="height: 110px;">
|
|
|
+ <div class="innner">
|
|
|
+ <div class="title">{{item.title}}</div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex_item">时间：{{item.date}}</div>
|
|
|
+ <div class="flex_item">来源：{{item.from_}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ {{item.desc}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import $ from 'jquery'
|
|
|
- import config from '/public/config.js'
|
|
|
- import utils from '/public/utils.js'
|
|
|
- import api from '/public/api.js'
|
|
|
- import VChart, {
|
|
|
- THEME_KEY
|
|
|
- } from "vue-echarts";
|
|
|
- import * as echarts from 'echarts';
|
|
|
-
|
|
|
- import Swiper from 'swiper';
|
|
|
- import 'swiper/dist/css/swiper.min.css';
|
|
|
+import $ from 'jquery'
|
|
|
+import config from '/public/config.js'
|
|
|
+import utils from '/public/utils.js'
|
|
|
+import api from '/public/api.js'
|
|
|
+import VChart, {
|
|
|
+ THEME_KEY
|
|
|
+} from "vue-echarts";
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- VChart
|
|
|
- },
|
|
|
- provide: {
|
|
|
- [THEME_KEY]: "dark"
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- height: $(window).height(),
|
|
|
- charts: {},
|
|
|
- timer: null,
|
|
|
- xuqiuchart: {},
|
|
|
- goodschart: {},
|
|
|
- costchart: {},
|
|
|
- categorys : ['玉米', '水稻', '小麦', '大豆', '青稞'],
|
|
|
- news: [{
|
|
|
- id: 1,
|
|
|
- title: '江苏东海给农业插上“数字化”翅膀',
|
|
|
- desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
|
|
|
- date: '2022-04-09 12:11',
|
|
|
- from_: '百度一下'
|
|
|
- }, {
|
|
|
- id: 1,
|
|
|
- title: '中国农业智能装备亮相哥伦比亚农科创新博览会',
|
|
|
- desc: '人民网里约热内卢4月8日电 (记者吴杰)当地时间4月6日至8日,由华南农业大学牵头组织的中国水果采摘机器人、播种及施肥无人机等智能装备亮相哥伦比亚农业科技国际云博览会,展示了中国精准农业、智慧农业、现代农业智能装备等领域的优势,',
|
|
|
- date: '2022-04-09 12:11',
|
|
|
- from_: '百度一下'
|
|
|
- }, {
|
|
|
- id: 1,
|
|
|
- title: '安徽出台规划助推农业农村现代化',
|
|
|
- desc: '安徽出台规划助推农业农村现代化作者:李应松 张守营 来源:中国经济导报 字数:839本报讯 李应松 记者张守营报道 日前',
|
|
|
- date: '2022-04-09 12:11',
|
|
|
- from_: '百度一下'
|
|
|
- }, {
|
|
|
- id: 1,
|
|
|
- title: '战疫情、保春耕、促生产,崇明现代农业园区做好春耕备耕',
|
|
|
- desc: '“东风吹绿草,布谷劝春耕。”春耕农时不等人,当前正处于疫情防控攻坚阶段,也是春耕生产备耕的关键时间节点,崇明现代农业园区以“战疫情、保春耕、促生产”为着力点,抢农时、抓备耕,确保',
|
|
|
- date: '2022-04-09 12:11',
|
|
|
- from_: '百度一下'
|
|
|
- }, {
|
|
|
- id: 1,
|
|
|
- title: '江苏东海给农业插上“数字化”翅膀',
|
|
|
- desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
|
|
|
- date: '2022-04-09 12:11',
|
|
|
- from_: '百度一下'
|
|
|
- }, {
|
|
|
- id: 1,
|
|
|
- title: '江苏东海给农业插上“数字化”翅膀',
|
|
|
- desc: '5月份,这些葡萄就可以销售了。”走进东海县石梁河镇金朵家庭农场,农场主曹桂林与父亲曹玉早正在种植的60亩温室内依据县农业物联网信息中心专家的“指令”,对葡萄进行抹芽、定梢和花穗',
|
|
|
- date: '2022-04-09 12:11',
|
|
|
- from_: '百度一下'
|
|
|
- }],
|
|
|
- swiper:null
|
|
|
- }
|
|
|
- },
|
|
|
- mounted: function() {
|
|
|
- var that = this;
|
|
|
- $(window).resize(function() {
|
|
|
- this.height = $(window).height() - this.titleheight;
|
|
|
+import Swiper from 'swiper';
|
|
|
+import 'swiper/dist/css/swiper.min.css';
|
|
|
|
|
|
- for (var key in that.charts) {
|
|
|
- that.charts[key].resize();
|
|
|
- }
|
|
|
- that.$refs['xuqiuchart'].resize();
|
|
|
- that.$refs['goodschart'].resize();
|
|
|
- that.$refs['costchart'].resize();
|
|
|
- });
|
|
|
-
|
|
|
- this.swiper = new Swiper('.swiper-container', {
|
|
|
- autoplay: 1000, //可选选项，自动滑动
|
|
|
- loop: true,
|
|
|
- direction: 'vertical',
|
|
|
- slidesPerView: (((this.height - 80) - 35)) / 110,
|
|
|
- })
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VChart
|
|
|
+ },
|
|
|
+ provide: {
|
|
|
+ [THEME_KEY]: "dark"
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ height: $(window).height(),
|
|
|
+ charts: {},
|
|
|
+ timer: null,
|
|
|
+ xuqiuchart: {},
|
|
|
+ goodschart: {},
|
|
|
+ costchart: {},
|
|
|
+ categorys : ['玉米', '水稻', '小麦', '大豆', '青稞'],
|
|
|
+ news: [{
|
|
|
+ id: 1,
|
|
|
+ title:'中国农业展望报告（2024—2033）',
|
|
|
+ desc: '4月20日至21日，中国农业展望大会在京召开，大会发布了《中国农业展望报告（2024—2033）》（以下简称报告）。报告总结回顾了20种（类）主要农产品的2023年市场形势，对未来十年尤其是2024年、2028年和2033年等重要时间节点的生产、消费、贸易、价格走势进行了展望。报告显示，未来10年粮食等重要农产品综合生产能力将显著增强，农产品消费持续升级，食物消费结构不断优化，农产品贸易保持增长趋势。在大力实施粮油等主要作物大面积单产提升行动下，农产品产量稳步增长，预计2033年粮食产量将达到7.66亿吨，年均增长1.1%。',
|
|
|
+ date: '2024-04-23',
|
|
|
+ from_: '农民日报'
|
|
|
+ }, {
|
|
|
+ id: 1,
|
|
|
+ title: '科技赋能助力实现好“丰”景',
|
|
|
+ desc: '4月28日，中国社会科学院发布了《中国数字经济高质量发展报告（2023）》（以下简称《报告》）。《报告》指出，大数据、云计算、区块链等新兴数字技术与农业、农村和乡村振兴有效融合，正在改变传统资源配置模式，为农业现代化提供新机遇。在数字经济与实体经济融合过程中，我国涌现了以京东、华为、中国联通等为代表的一系列新型实体企业，成为乡村振兴新主体。促进产业链、供应链数字化、智能化转型，以数字经济和数字技术补齐乡村振兴“短板”。',
|
|
|
+ date: '2024-04-30',
|
|
|
+ from_: '央视网'
|
|
|
+ }, {
|
|
|
+ id: 1,
|
|
|
+ title:'2024年农业主导品种主推技术的通知',
|
|
|
+ desc: '各地农业农村部门要抓好主要作物主导品种主推技术推广应用，充分利用基层农业技术推广体系、国家现代农业产业技术体系以及农业科技社会化服务组织等，开展主导品种主推技术示范展示和指导培训，引导带动广大农户和新型农业经营主体应用先进适用技术，促进农业科技成果尽快进村入户到田，不断提高技术入户率到位率，为提升粮油等主要作物生产能力提供有力科技支撑。',
|
|
|
+ date: '2024-04-28',
|
|
|
+ from_: '农业农村部网站'
|
|
|
+ }, {
|
|
|
+ id: 1,
|
|
|
+ title:'两会-有力有效推进乡村全面振兴',
|
|
|
+ desc: '党的十八大以来，以习近平同志为核心的党中央坚持把解决“三农”问题作为全党工作的重中之重。实施乡村振兴战略，是我们党“三农”工作一系列方针政策的继承和发展，是亿万农民的殷切期盼。今年全国两会，乡村全面振兴成为热议的话题。代表委员表示，要锚定建设农业强国目标，有力有效推进乡村全面振兴，以加快农业农村现代化更好推进中国式现代化建设。',
|
|
|
+ date: '2024-03-10',
|
|
|
+ from_: '人民日报'
|
|
|
+ }, {
|
|
|
+ id: 1,
|
|
|
+ title: '2024年中国农业数字化行业政策解读',
|
|
|
+ desc: '“十四五”期间，我国大部分省份都提出了有关农业数字化行业的发展规划。例如辽宁省规划到2025年年底，农村互联网普及率超过80%，农业数字经济在农业增加值中的占比达15%。浙江省提出到2025年，数字“三农”协同应用平台全面建成，生产管理、流通营销、行业监管、公共服务、乡村治理等五大领域核心业务应用全面推广。',
|
|
|
+ date: '2024-03-05',
|
|
|
+ from_: '前瞻网'
|
|
|
+ }, {
|
|
|
+ id: 1,
|
|
|
+ title:'2024中国农业农村发展趋势报告发布',
|
|
|
+ desc: '农业强国是社会主义现代化强国的根基，推进农业农村现代化是实现高质量发展的必然要求。坚持农业农村优先发展，坚持城乡融合发展，把责任扛在肩上、抓在手上，结合实际创造性开展工作，有力有效推进乡村全面振兴，以加快农业农村现代化更好推进中国式现代化建设。',
|
|
|
+ date: '2024-01-19',
|
|
|
+ from_: '中国经济网'
|
|
|
+ }],
|
|
|
+ swiper:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ var that = this;
|
|
|
+ $(window).resize(function() {
|
|
|
+ this.height = $(window).height() - this.titleheight;
|
|
|
|
|
|
- this.initcharts();
|
|
|
+ for (var key in that.charts) {
|
|
|
+ that.charts[key].resize();
|
|
|
+ }
|
|
|
+ that.$refs['xuqiuchart'].resize();
|
|
|
+ that.$refs['goodschart'].resize();
|
|
|
+ that.$refs['costchart'].resize();
|
|
|
+ });
|
|
|
|
|
|
- //开始定时刷新报表数据
|
|
|
- this.startRefreshChart();
|
|
|
- },
|
|
|
- unmounted: function() {
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 定时刷新报表数据
|
|
|
- */
|
|
|
- startRefreshChart: function() {
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- var that = this;
|
|
|
+ this.swiper = new Swiper('.swiper-container', {
|
|
|
+ autoplay: 1000, //可选选项，自动滑动
|
|
|
+ loop: true,
|
|
|
+ direction: 'vertical',
|
|
|
+ slidesPerView: (((this.height - 80) - 35)) / 110,
|
|
|
+ })
|
|
|
|
|
|
- //获取刷新周期，TODO 配置变动时，此处需自动更新
|
|
|
- var refreshtime = 60 * 1000;
|
|
|
- config.getConfig().forEach(function(item, index) {
|
|
|
- if (item.key == 'refreshtime') {
|
|
|
- refreshtime = item.value;
|
|
|
- }
|
|
|
- });
|
|
|
+ this.initcharts();
|
|
|
|
|
|
- this.timer = setInterval(function() {
|
|
|
- that.swiper.slideNext();
|
|
|
-
|
|
|
- //---------------
|
|
|
- var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0)];
|
|
|
- that.xuqiuchart.series[0].data = values;
|
|
|
- that.xuqiuchart.series[1].data = values;
|
|
|
- that.xuqiuchart.series[2].data = values;
|
|
|
-
|
|
|
- //---------------
|
|
|
- var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0)];
|
|
|
- that.goodschart.series[0].data = values;
|
|
|
- that.goodschart.series[1].data = values;
|
|
|
- that.goodschart.series[2].data = values;
|
|
|
-
|
|
|
- //---------------
|
|
|
- var dates = [];
|
|
|
- var start = new Date();
|
|
|
- start.setDate(start.getDate()-30);
|
|
|
- for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
- dates.push(i.format('MM-dd'));
|
|
|
- }
|
|
|
-
|
|
|
- var series = [];
|
|
|
- var xData = [];
|
|
|
- that.categorys.forEach(function (item,index){
|
|
|
- xData.push(item);
|
|
|
- series.push({
|
|
|
- name: item,
|
|
|
- data: [],
|
|
|
- type: 'line',
|
|
|
- stack:'1',
|
|
|
- // smooth:true,
|
|
|
- lineStyle: {
|
|
|
- nomal:{
|
|
|
- width:1,
|
|
|
- color: config.colors[index%config.colors.length]
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- formatter: '{c}%',
|
|
|
- position: 'top',
|
|
|
- color: 'rgba(255,228,59,1)',
|
|
|
- fontSize: 12,
|
|
|
- textAlign: 'center',
|
|
|
- }
|
|
|
- });
|
|
|
- for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
- series[index].data.push((Math.random(100) * 100).toFixed(0));
|
|
|
- }
|
|
|
- });
|
|
|
- that.costchart.xAxis.data = dates;
|
|
|
- that.costchart.series = series;
|
|
|
- }, refreshtime);
|
|
|
- },
|
|
|
- initcharts: function() {
|
|
|
- this.xuqiuchart = this.initxuqiuchart();
|
|
|
- this.goodschart = this.initgoodschart();
|
|
|
- this.costchart = this.initcostchart();
|
|
|
- },
|
|
|
- initxuqiuchart: function() {
|
|
|
- var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0)];
|
|
|
- return {
|
|
|
- backgroundColor: '#000000',
|
|
|
- grid: utils.createChartGaid(null, null, "20px", "20px"),
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartXColor()
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: utils.getChartXTextColor()
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- // boundaryGap: false,//
|
|
|
- data: this.categorys,
|
|
|
- type: 'category',
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- axisLabel: {
|
|
|
- color: utils.getChartYTextColor(),
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartXColor()
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartYColor(),
|
|
|
- type: 'dashed'
|
|
|
- },
|
|
|
- },
|
|
|
- name: '',
|
|
|
- },
|
|
|
- series: [
|
|
|
- // {
|
|
|
- // name: "含量",
|
|
|
- // data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- // .random(100) * 100).toFixed(0)],
|
|
|
- // type: 'bar',
|
|
|
- // barWidth: '20px',
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // formatter: '{c}%',
|
|
|
- // position: 'top',
|
|
|
- // color: 'rgba(255,228,59,1)',
|
|
|
- // fontSize: 12,
|
|
|
- // textAlign: 'center',
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // color: function(pama) {
|
|
|
- // var colors = ['#fac858', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
|
|
|
- // '#4caff9', '#4adeca', '#0270f2', '#488cf7'
|
|
|
- // ];
|
|
|
- // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: colors[pama.dataIndex % colors.length] + 'ff',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: colors[pama.dataIndex % colors.length] + '66',
|
|
|
- // },
|
|
|
- // ])
|
|
|
- // },
|
|
|
- // barBorderRadius: 20
|
|
|
- // }
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '光照',
|
|
|
- type: 'bar',
|
|
|
- barWidth: '20px',
|
|
|
- barGap: '60%',
|
|
|
- itemStyle: {
|
|
|
- color: '#FF5252aa',
|
|
|
- borderColor: '#FF5252aa',
|
|
|
- borderWidth: 1,
|
|
|
- borderType: 'solid',
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- formatter: '{c}' + '%',
|
|
|
- position: 'top',
|
|
|
- color: 'rgba(255,228,59,1)',
|
|
|
- fontSize: 12,
|
|
|
- textAlign: 'center',
|
|
|
- },
|
|
|
- zlevel: 2,
|
|
|
- data: values,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '光照',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [20, 10],
|
|
|
- symbolOffset: [0, -5],
|
|
|
- symbolPosition: 'end',
|
|
|
- z: 15,
|
|
|
- color: '#FF5252',
|
|
|
- zlevel: 3,
|
|
|
- data: values,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '光照',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [20, 10],
|
|
|
- symbolOffset: [0, 5],
|
|
|
- symbolPosition: 'start',
|
|
|
- z: 15,
|
|
|
- color: '#FF5252',
|
|
|
- zlevel: 3,
|
|
|
- data: values,
|
|
|
- }]
|
|
|
- };
|
|
|
- },
|
|
|
- initgoodschart: function() {
|
|
|
- var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- .random(100) * 100).toFixed(0)];
|
|
|
- return {
|
|
|
- backgroundColor: '#000000',
|
|
|
- grid: utils.createChartGaid(null, null, "20px", "20px"),
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartXColor()
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: utils.getChartXTextColor()
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- // boundaryGap: false,//
|
|
|
- data: this.categorys,
|
|
|
- type: 'category',
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- axisLabel: {
|
|
|
- color: utils.getChartYTextColor(),
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartXColor()
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartYColor(),
|
|
|
- type: 'dashed'
|
|
|
- },
|
|
|
- },
|
|
|
- name: '',
|
|
|
- },
|
|
|
- series: [
|
|
|
- // {
|
|
|
- // name: "含量",
|
|
|
- // data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
- // .random(100) * 100).toFixed(0)],
|
|
|
- // type: 'bar',
|
|
|
- // barWidth: '20px',
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // formatter: '{c}%',
|
|
|
- // position: 'top',
|
|
|
- // color: 'rgba(255,228,59,1)',
|
|
|
- // fontSize: 12,
|
|
|
- // textAlign: 'center',
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // color: function(pama) {
|
|
|
- // var colors = ['#fac858', '#4adeca', '#0270f2', '#488cf7', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
|
|
|
- // '#4caff9'
|
|
|
- // ];
|
|
|
- // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: colors[pama.dataIndex % colors.length] + 'ff',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: colors[pama.dataIndex % colors.length] + '66',
|
|
|
- // },
|
|
|
- // ])
|
|
|
- // },
|
|
|
- // barBorderRadius: 20
|
|
|
- // }
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '光照',
|
|
|
- type: 'bar',
|
|
|
- barWidth: '20px',
|
|
|
- barGap: '60%',
|
|
|
- itemStyle: {
|
|
|
- color: '#BAFF7Faa',
|
|
|
- borderColor: '#BAFF7Faa',
|
|
|
- borderWidth: 1,
|
|
|
- borderType: 'solid',
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- formatter: '{c}' + '%',
|
|
|
- position: 'top',
|
|
|
- color: 'rgba(255,228,59,1)',
|
|
|
- fontSize: 12,
|
|
|
- textAlign: 'center',
|
|
|
- },
|
|
|
- zlevel: 2,
|
|
|
- data: values,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '光照',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [20, 10],
|
|
|
- symbolOffset: [0, -5],
|
|
|
- symbolPosition: 'end',
|
|
|
- z: 15,
|
|
|
- color: '#BAFF7F',
|
|
|
- zlevel: 3,
|
|
|
- data: values,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '光照',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [20, 10],
|
|
|
- symbolOffset: [0, 5],
|
|
|
- symbolPosition: 'start',
|
|
|
- z: 15,
|
|
|
- color: '#BAFF7F',
|
|
|
- zlevel: 3,
|
|
|
- data: values,
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- initcostchart: function() {
|
|
|
- var dates = [];
|
|
|
- var start = new Date();
|
|
|
- start.setDate(start.getDate()-30);
|
|
|
- for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
- dates.push(i.format('MM-dd'));
|
|
|
- }
|
|
|
-
|
|
|
- var series = [];
|
|
|
- var xData = [];
|
|
|
- this.categorys.forEach(function (item,index){
|
|
|
- xData.push(item);
|
|
|
- series.push({
|
|
|
- name: item,
|
|
|
- data: [],
|
|
|
- type: 'line',
|
|
|
- stack:'1',
|
|
|
- // smooth:true,
|
|
|
- lineStyle: {
|
|
|
- nomal:{
|
|
|
- width:1,
|
|
|
- color: config.colors[index%config.colors.length]
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- formatter: '{c}%',
|
|
|
- position: 'top',
|
|
|
- color: 'rgba(255,228,59,1)',
|
|
|
- fontSize: 12,
|
|
|
- textAlign: 'center',
|
|
|
- }
|
|
|
- });
|
|
|
- for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
- series[index].data.push((Math.random(100) * 100).toFixed(0));
|
|
|
- }
|
|
|
- });
|
|
|
- return {
|
|
|
- backgroundColor: '#000000',
|
|
|
- grid: utils.createChartGaid(null, null, "20px", "40px"),
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
- },
|
|
|
- },
|
|
|
- legend:{
|
|
|
- bottom:'0',
|
|
|
- x:'center',
|
|
|
- data:xData
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartXColor()
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: utils.getChartXTextColor()
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- boundaryGap: false,//
|
|
|
- data: dates,
|
|
|
- type: 'category',
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- axisLabel: {
|
|
|
- color: utils.getChartYTextColor(),
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartXColor()
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: utils.getChartYColor(),
|
|
|
- type: 'dashed'
|
|
|
- },
|
|
|
- },
|
|
|
- name: '',
|
|
|
- },
|
|
|
- series: series
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ //开始定时刷新报表数据
|
|
|
+ this.startRefreshChart();
|
|
|
+ },
|
|
|
+ unmounted: function() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 定时刷新报表数据
|
|
|
+ */
|
|
|
+ startRefreshChart: function() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ var that = this;
|
|
|
+
|
|
|
+ //获取刷新周期，TODO 配置变动时，此处需自动更新
|
|
|
+ var refreshtime = 60 * 1000;
|
|
|
+ config.getConfig().forEach(function(item, index) {
|
|
|
+ if (item.key == 'refreshtime') {
|
|
|
+ refreshtime = item.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.timer = setInterval(function() {
|
|
|
+ that.swiper.slideNext();
|
|
|
+
|
|
|
+ //---------------
|
|
|
+ var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0)];
|
|
|
+ that.xuqiuchart.series[0].data = values;
|
|
|
+ that.xuqiuchart.series[1].data = values;
|
|
|
+ that.xuqiuchart.series[2].data = values;
|
|
|
+
|
|
|
+ //---------------
|
|
|
+ var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0)];
|
|
|
+ that.goodschart.series[0].data = values;
|
|
|
+ that.goodschart.series[1].data = values;
|
|
|
+ that.goodschart.series[2].data = values;
|
|
|
+
|
|
|
+ //---------------
|
|
|
+ var dates = [];
|
|
|
+ var start = new Date();
|
|
|
+ start.setDate(start.getDate()-30);
|
|
|
+ for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
+ dates.push(i.format('MM-dd'));
|
|
|
+ }
|
|
|
+
|
|
|
+ var series = [];
|
|
|
+ var xData = [];
|
|
|
+ that.categorys.forEach(function (item,index){
|
|
|
+ xData.push(item);
|
|
|
+ series.push({
|
|
|
+ name: item,
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ stack:'1',
|
|
|
+ // smooth:true,
|
|
|
+ lineStyle: {
|
|
|
+ nomal:{
|
|
|
+ width:1,
|
|
|
+ color: config.colors[index%config.colors.length]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{c}%',
|
|
|
+ position: 'top',
|
|
|
+ color: 'rgba(255,228,59,1)',
|
|
|
+ fontSize: 12,
|
|
|
+ textAlign: 'center',
|
|
|
+ }
|
|
|
+ });
|
|
|
+ for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
+ series[index].data.push((Math.random(100) * 100).toFixed(0));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.costchart.xAxis.data = dates;
|
|
|
+ that.costchart.series = series;
|
|
|
+ }, refreshtime);
|
|
|
+ },
|
|
|
+ initcharts: function() {
|
|
|
+ this.xuqiuchart = this.initxuqiuchart();
|
|
|
+ this.goodschart = this.initgoodschart();
|
|
|
+ this.costchart = this.initcostchart();
|
|
|
+ },
|
|
|
+ initxuqiuchart: function() {
|
|
|
+ var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0)];
|
|
|
+ return {
|
|
|
+ backgroundColor: '#000000',
|
|
|
+ grid: utils.createChartGaid(null, null, "20px", "20px"),
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartXColor()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: utils.getChartXTextColor()
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ // boundaryGap: false,//
|
|
|
+ data: this.categorys,
|
|
|
+ type: 'category',
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ color: utils.getChartYTextColor(),
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartXColor()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartYColor(),
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: '',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ // {
|
|
|
+ // name: "含量",
|
|
|
+ // data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ // .random(100) * 100).toFixed(0)],
|
|
|
+ // type: 'bar',
|
|
|
+ // barWidth: '20px',
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: '{c}%',
|
|
|
+ // position: 'top',
|
|
|
+ // color: 'rgba(255,228,59,1)',
|
|
|
+ // fontSize: 12,
|
|
|
+ // textAlign: 'center',
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // color: function(pama) {
|
|
|
+ // var colors = ['#fac858', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
|
|
|
+ // '#4caff9', '#4adeca', '#0270f2', '#488cf7'
|
|
|
+ // ];
|
|
|
+ // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: colors[pama.dataIndex % colors.length] + 'ff',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: colors[pama.dataIndex % colors.length] + '66',
|
|
|
+ // },
|
|
|
+ // ])
|
|
|
+ // },
|
|
|
+ // barBorderRadius: 20
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ name: '光照',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20px',
|
|
|
+ barGap: '60%',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF5252aa',
|
|
|
+ borderColor: '#FF5252aa',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderType: 'solid',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{c}' + '%',
|
|
|
+ position: 'top',
|
|
|
+ color: 'rgba(255,228,59,1)',
|
|
|
+ fontSize: 12,
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ zlevel: 2,
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '光照',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolSize: [20, 10],
|
|
|
+ symbolOffset: [0, -5],
|
|
|
+ symbolPosition: 'end',
|
|
|
+ z: 15,
|
|
|
+ color: '#FF5252',
|
|
|
+ zlevel: 3,
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '光照',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolSize: [20, 10],
|
|
|
+ symbolOffset: [0, 5],
|
|
|
+ symbolPosition: 'start',
|
|
|
+ z: 15,
|
|
|
+ color: '#FF5252',
|
|
|
+ zlevel: 3,
|
|
|
+ data: values,
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ initgoodschart: function() {
|
|
|
+ var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ .random(100) * 100).toFixed(0)];
|
|
|
+ return {
|
|
|
+ backgroundColor: '#000000',
|
|
|
+ grid: utils.createChartGaid(null, null, "20px", "20px"),
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartXColor()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: utils.getChartXTextColor()
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ // boundaryGap: false,//
|
|
|
+ data: this.categorys,
|
|
|
+ type: 'category',
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ color: utils.getChartYTextColor(),
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartXColor()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartYColor(),
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: '',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ // {
|
|
|
+ // name: "含量",
|
|
|
+ // data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ // .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
|
|
|
+ // .random(100) * 100).toFixed(0)],
|
|
|
+ // type: 'bar',
|
|
|
+ // barWidth: '20px',
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: '{c}%',
|
|
|
+ // position: 'top',
|
|
|
+ // color: 'rgba(255,228,59,1)',
|
|
|
+ // fontSize: 12,
|
|
|
+ // textAlign: 'center',
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // color: function(pama) {
|
|
|
+ // var colors = ['#fac858', '#4adeca', '#0270f2', '#488cf7', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
|
|
|
+ // '#4caff9'
|
|
|
+ // ];
|
|
|
+ // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: colors[pama.dataIndex % colors.length] + 'ff',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: colors[pama.dataIndex % colors.length] + '66',
|
|
|
+ // },
|
|
|
+ // ])
|
|
|
+ // },
|
|
|
+ // barBorderRadius: 20
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ name: '光照',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20px',
|
|
|
+ barGap: '60%',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#BAFF7Faa',
|
|
|
+ borderColor: '#BAFF7Faa',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderType: 'solid',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{c}' + '%',
|
|
|
+ position: 'top',
|
|
|
+ color: 'rgba(255,228,59,1)',
|
|
|
+ fontSize: 12,
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ zlevel: 2,
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '光照',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolSize: [20, 10],
|
|
|
+ symbolOffset: [0, -5],
|
|
|
+ symbolPosition: 'end',
|
|
|
+ z: 15,
|
|
|
+ color: '#BAFF7F',
|
|
|
+ zlevel: 3,
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '光照',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolSize: [20, 10],
|
|
|
+ symbolOffset: [0, 5],
|
|
|
+ symbolPosition: 'start',
|
|
|
+ z: 15,
|
|
|
+ color: '#BAFF7F',
|
|
|
+ zlevel: 3,
|
|
|
+ data: values,
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ initcostchart: function() {
|
|
|
+ var dates = [];
|
|
|
+ var start = new Date();
|
|
|
+ start.setDate(start.getDate()-30);
|
|
|
+ for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
+ dates.push(i.format('MM-dd'));
|
|
|
+ }
|
|
|
+
|
|
|
+ var series = [];
|
|
|
+ var xData = [];
|
|
|
+ this.categorys.forEach(function (item,index){
|
|
|
+ xData.push(item);
|
|
|
+ series.push({
|
|
|
+ name: item,
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ stack:'1',
|
|
|
+ // smooth:true,
|
|
|
+ lineStyle: {
|
|
|
+ nomal:{
|
|
|
+ width:1,
|
|
|
+ color: config.colors[index%config.colors.length]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{c}%',
|
|
|
+ position: 'top',
|
|
|
+ color: 'rgba(255,228,59,1)',
|
|
|
+ fontSize: 12,
|
|
|
+ textAlign: 'center',
|
|
|
+ }
|
|
|
+ });
|
|
|
+ for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
|
|
|
+ series[index].data.push((Math.random(100) * 100).toFixed(0));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ backgroundColor: '#000000',
|
|
|
+ grid: utils.createChartGaid(null, null, "20px", "40px"),
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend:{
|
|
|
+ bottom:'0',
|
|
|
+ x:'center',
|
|
|
+ data:xData
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartXColor()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: utils.getChartXTextColor()
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ boundaryGap: false,//
|
|
|
+ data: dates,
|
|
|
+ type: 'category',
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ color: utils.getChartYTextColor(),
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartXColor()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: utils.getChartYColor(),
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: '',
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped="scoped">
|
|
|
- .chart {
|
|
|
- padding: 10px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+.chart {
|
|
|
+ padding: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.itemtitle {
|
|
|
+ background: linear-gradient(to right, #40a55f, #000, #000);
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.name_border {
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ margin: 5px auto;
|
|
|
+ background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, #40a55f, #40a55f, rgba(0, 0, 0, 0));
|
|
|
+}
|
|
|
+
|
|
|
+.name_v_border {
|
|
|
+ width: 1px;
|
|
|
+ height: 70px;
|
|
|
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, rgba(0, 0, 0, 0));
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.newitem {
|
|
|
+ height: 110px;
|
|
|
+ border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #999;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
|
|
|
- .itemtitle {
|
|
|
- background: linear-gradient(to right, #40a55f, #000, #000);
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
+.newitem .title {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 35px;
|
|
|
+ height: 35px;
|
|
|
+ text-align: left;
|
|
|
+ color: #FF5722;
|
|
|
+}
|
|
|
|
|
|
- .name_border {
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- margin: 5px auto;
|
|
|
- background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, #40a55f, #40a55f, rgba(0, 0, 0, 0));
|
|
|
- }
|
|
|
+.newitem .desc {
|
|
|
+ height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ /* // 显示的行 */
|
|
|
+}
|
|
|
|
|
|
- .name_v_border {
|
|
|
- width: 1px;
|
|
|
- height: 70px;
|
|
|
- background: linear-gradient(0deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, rgba(0, 0, 0, 0));
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .newitem {
|
|
|
- height: 110px;
|
|
|
- border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
|
|
|
- font-size: 14px;
|
|
|
- line-height: 20px;
|
|
|
- color: #999;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .newitem .title {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 35px;
|
|
|
- height: 35px;
|
|
|
- text-align: left;
|
|
|
- color: #FF5722;
|
|
|
- }
|
|
|
-
|
|
|
- .newitem .desc {
|
|
|
- height: 40px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- /* // 显示的行 */
|
|
|
- }
|
|
|
-
|
|
|
- .newitem:hover {
|
|
|
- color: #fac858aa;
|
|
|
- }
|
|
|
+.newitem:hover {
|
|
|
+ color: #fac858aa;
|
|
|
+}
|
|
|
</style>
|
ZZW