| xqd
@@ -1,194 +0,0 @@
|
|
|
-/**
|
|
|
- * Created by JianJia.Zhou<jianjia.zhou> on 2022/10/3.
|
|
|
- */
|
|
|
-let statDown = (function () {
|
|
|
- let chartInstance = '';
|
|
|
- let dataUrl = '';
|
|
|
- let btnName = '';
|
|
|
- let searchBtnName = '';
|
|
|
-
|
|
|
- statDown.init = {
|
|
|
- _init(options) {
|
|
|
- chartInstance = echarts.init(document.getElementById(options.dom))
|
|
|
- dataUrl = options.url
|
|
|
- btnName = options.btnName
|
|
|
- searchBtnName = options.searchBtnName
|
|
|
-
|
|
|
- statDown.buttonEvent._init()
|
|
|
- }
|
|
|
- }
|
|
|
- statDown.buttonEvent = {
|
|
|
- _init() {
|
|
|
- $(btnName).bind("click", function () {
|
|
|
- $(this).toggleClass('btn-primary').toggleClass('btn-default')
|
|
|
- statDown.chart.render()
|
|
|
- })
|
|
|
- $('.datepicker').datetimepicker({
|
|
|
- locale: 'zh-CN',
|
|
|
- format: 'YYYY-MM-DD',
|
|
|
- });
|
|
|
- $(searchBtnName).bind('click', function () {
|
|
|
- statDown.chart.render()
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
- statDown.query = {
|
|
|
- getData() {
|
|
|
- let productIds = [];
|
|
|
- $(`${btnName}.btn-primary`).each((index, obj) => {
|
|
|
- productIds.push($(obj).data('id'))
|
|
|
- })
|
|
|
- let startAt = $("#filter-column-name-start").val();
|
|
|
- let endAt = $("#filter-column-name-end").val();
|
|
|
- let name = $(".filter-column-name").val();
|
|
|
- let data = {
|
|
|
- productIds,
|
|
|
- startAt,
|
|
|
- endAt,
|
|
|
- name
|
|
|
- }
|
|
|
- return $.post({
|
|
|
- url: dataUrl,
|
|
|
- data
|
|
|
- })
|
|
|
- },
|
|
|
- };
|
|
|
- statDown.chart = {
|
|
|
- render() {
|
|
|
- let data = this.getLegend();
|
|
|
- let categoryData = data.categoryData;
|
|
|
- let legendData = data.legendData;
|
|
|
- let option = this.options(legendData);
|
|
|
- chartInstance.setOption(option, true);
|
|
|
- this.query(legendData, categoryData)
|
|
|
- },
|
|
|
- query(legendData, categoryData) {
|
|
|
- chartInstance.showLoading()
|
|
|
- statDown.query.getData().then(res => {
|
|
|
- let {data} = res
|
|
|
- let series = [];
|
|
|
- legendData.forEach((item, index) => {
|
|
|
- let temp = {
|
|
|
- name: item.name,
|
|
|
- type: item.type,
|
|
|
- data: data[categoryData[index]]
|
|
|
- };
|
|
|
- series.push(temp);
|
|
|
- });
|
|
|
-
|
|
|
- chartInstance.setOption({
|
|
|
- xAxis: [{
|
|
|
- data: data.dates,
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }],
|
|
|
- series: series
|
|
|
- });
|
|
|
- chartInstance.hideLoading();
|
|
|
- });
|
|
|
- },
|
|
|
- getLegend() {
|
|
|
- let categoryData = [];
|
|
|
- let legendData = [];
|
|
|
- $(".btn-product.btn-primary").each(function () {
|
|
|
- let id = $(this).data("id");
|
|
|
- let name = $(this).text();
|
|
|
- let names = {name: `[${name}]下载数量`, type: 'line', barMaxWidth: 30, average: false};
|
|
|
- categoryData.push(`product_download_num_${id}`);
|
|
|
- legendData.push(names);
|
|
|
- });
|
|
|
- return {legendData, categoryData}
|
|
|
- },
|
|
|
- options(legends) {
|
|
|
- let seriesData = [];
|
|
|
- let legendSelected = {};
|
|
|
- let colors = ["#0095F3", "#95E04A", "#605EEB", "#4ACDBB", "#FFD480"];
|
|
|
- for (let item of legends) {
|
|
|
- let series = {
|
|
|
- name: item.name,
|
|
|
- type: item.type !== undefined ? item.type : 'line',
|
|
|
- barWidth: item.barWidth !== undefined ? item.barWidth : '',
|
|
|
- yAxisIndex: item.yAxisIndex !== undefined ? item.yAxisIndex : 0,
|
|
|
- smooth: true,
|
|
|
- data: [],
|
|
|
- };
|
|
|
- legendSelected[item.name] = item.show !== undefined ? item.show : true;
|
|
|
- if (item.average) {
|
|
|
- series['markLine'] = {
|
|
|
- data: [
|
|
|
- {type: 'average', name: '平均值'}
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- seriesData.push(series);
|
|
|
- }
|
|
|
- return {
|
|
|
- animation: true,
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
|
|
- type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
|
- },
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- // dataView: {show: true, readOnly: false},
|
|
|
- magicType: {show: true, type: ['line', 'bar']},
|
|
|
- restore: {show: true},
|
|
|
- saveAsImage: {show: true}
|
|
|
- }
|
|
|
- },
|
|
|
- /*legend: {
|
|
|
- type :'scroll',
|
|
|
- left:50,
|
|
|
- right:50,
|
|
|
- height:500,
|
|
|
- data: legend_data,
|
|
|
- selected:legend_selected,
|
|
|
- },*/
|
|
|
- grid: {
|
|
|
- left: '4%',
|
|
|
- right: '4%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- type: 'slider',
|
|
|
- show: true,
|
|
|
- xAxisIndex: 0,
|
|
|
- yAxisIndex: 1,
|
|
|
- start: 0,
|
|
|
- end: 100,
|
|
|
- }, {
|
|
|
- type: 'inside',
|
|
|
- xAxisIndex: 0,
|
|
|
- yAxisIndex: 1,
|
|
|
- start: 0,
|
|
|
- end: 100
|
|
|
- }],
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: [],
|
|
|
- //boundaryGap: false
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- name: '产品下载量',
|
|
|
- type: 'value',
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} '
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- series: seriesData,
|
|
|
- //color: colors
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-})
|
|
|
-
|