lixin-web/webapp/js/echarts.js

vue and bootstrap

import {round,each,zipObject} from 'lodash'
import echarts from 'echarts/lib/echarts'
// require('echarts/theme/shine')
// 直接require会引入echarts所有组件
import macaron from '../module/ref/macarons'

echarts.registerTheme('custom', macaron);

// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/legend')
// require('echarts/lib/chart/bar')
// require('echarts/lib/component/grid');
// require('echarts/lib/component/toolbox');
// function initChartYue() {
//   require([
//     'echarts/lib/component/title',
//     'echarts/lib/chart/pie'
//   ],function () {
//
//     echarts.init(document.getElementById('YuE'),'shine').setOption({
//
//       "title": {
//         "text": "余额",
//         "subtext": "充值",
//         "sublink": "#mode=financeCenter&page=recharge",
//         "subtarget": "self",
//         left:'center',top:'50%',
//         // "itemGap": 10,
//         "textStyle": {
//           // "color": "rgba(30,144,255,0.8)",
//           "color": "rgb(0,0,0)",
//           "fontFamily": "微软雅黑",
//           "fontSize": 35,
//           // "fontWeight": "bolder"
//         },
//         "subtextStyle": {
//           "fontSize": 16
//         }
//       },
//       "tooltip": {
//         "show": true,
//         "formatter": "{a} <br>{b} : {c} ({d}%)"
//       },
//       legend: {
//         orient: 'vertical',
//         left:0,top:'10',
//         data:['彩票余额','百家乐余额','冻结金额']
//       },
//       "series": [{
//         "name": "余额",
//         "type": "pie",
//         "radius": ["40%", "50%"],
//         "center": ["50%", "60%"],
//         "data": [{
//           "value": AppData.getLotteryAccount().availableBalance.toFixed(3),
//           "name": "彩票余额",
//           itemStyle:{
//             normal:{
//               color:'#59d3d6'
//             }
//           }
//         }, {
//           "value": 0.0.toFixed(3),
//           "name": "百家乐余额",
//           itemStyle:{
//             normal:{
//               color:'#fd888e'
//             }
//           }
//         }, {
//           "value": AppData.getLotteryAccount().blockedBalance.toFixed(3),
//           "name": "冻结金额",
//           itemStyle:{
//             normal:{
//               color:'#1fb7f4'
//             }
//           }
//         }],
//         "label": {
//           "normal": {
//             "formatter": "{b} \n ￥{c}"
//           }
//         }
//       }]
//     })
//
//     Will.ajax({},'/api/account/report-game-lottery',function(resData){
//       resData = resData.slice(resData.length > 5 ? -5 : 0)
//
//       var getValue = function (item) {
//         return resData.map(function(i){return !isNaN(i[item]) && i[item] ? i[item].toFixed(3) : 0 })
//       }
//
//       var data = [
//         ['充值','rgba(46, 199, 201, 0.75)',getValue('recharge')],
//         ['取款','rgba(216, 122, 128, 0.75)',getValue('withdraw')],
//         ['消费','#1fb7f4',getValue('consume')],
//         ['派奖','#fc972d',getValue('bonus')]
//       ]
//
//       var maxValue = Math.max.apply(null,resData.map(function (i,k) {
//         return data.map(function(item){
//           return item[2][k]
//         }).reduce(function (a,b) {
//           return parseInt(a) + parseInt(b)
//         })
//       }))
//
//       var dataTypeNum = function (index) {
//         return data.filter(function (item) {return item[2][index] > 0}).length
//       }
//       // echarts position no Function
//       // var pos = resData.map(function (i,k) {
//       //   return dataTypeNum(k) == 1 ? 'right' : 'insideLeft'
//       // })
//
//       echarts.init(document.getElementById('TianBaoBiao'),'shine').setOption({
//         "tooltip": {
//           "trigger": "axis",
//           "axisPointer": {
//             "type": "shadow"
//           }
//         },
//         "legend": {
//           "data": ["充值", "取款", "消费", "派奖"],
//           top:10,
//         },
//         // "calculable": true,
//         "xAxis": [{
//           "type": "value"
//         }],
//         "yAxis": [{
//           "type": "category",
//           "data": resData.map(function(i){return i.field.slice(5)})
//         }],
//         "series":data.map(function (i) {
//           return  {
//               "name": i[0],
//               "type": "bar",
//               "stack": "总量",
//               "itemStyle": {
//                 "normal": {
//                   "color": i[1],
//                 }
//               },
//               "label": {
//                 normal:{
//                   "show": true,
//                   "position": "insideLeft",
//                   formatter:function (i) {
//                     // is only one data type,if dataValue too less then hide
//                     // x轴数据是0 或 有数据相对总量较少且数据类型有2种以上时不显示
//                     if(i.data == 0 || (Math.ceil(maxValue/i.data) > 6 && dataTypeNum(i.dataIndex) > 1)) {
//                       return ''
//                     }
//                   },
//                   textStyle:{
//                     color:'#000'
//                   }
//                 }
//               },
//               "data": i[2]
//             }
//         })
//       })
//     });
//   })
// }

import 'echarts/lib/chart/line'
import   'echarts/lib/chart/bar'
//import  'echarts/lib/component/grid',
//import  'echarts/lib/component/title',
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
//import  'echarts/lib/component/markLine'
import  'echarts/lib/component/markPoint'

export function renderTeamView(option, element) {
  var date = option[0].date;

  var colors = ['#ffc235', '#07c9d5', '#27caf9', '#f56d96', '#13d882', '#ff7c42', '#f4e602']

  const selected = zipObject(option.map(v => v.name),option.map((v,k) => k == 2 || k == 3 || k == 4 ? true : false))
  let opt = option.slice()
  opt.forEach((v, k) => v.data = v.data.map(i => round(i,3)))
  const chart = echarts.init(element, 'custom')

  chart.setOption({
    // title: {
    //   show:date.length > 1 ? true : false,
    //   subtext: '（点击标签 开启/关闭 视图）',
    //   subtextStyle:{
    //     fontSize:12
    //   },
    //   top: -5,
    // },
    "tooltip": {
      "trigger": "axis"
    },
    toolbox: {
      show: true,
      top: -5,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        // dataView: {
        //   readOnly: false
        // },
        magicType: {
          type: ['line', 'bar']
        },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      left: 'left', top: 0,
      data: option.map(function (i) {
        return {
          name:i.name,
          icon:'circle'
        }
      }),
      selectedMode: date.length > 1 ? 'multiple' : true,
      selected,
    },
    grid: {
      left: '1%',
      right: '4.5%',
      bottom: '3%',
      containLabel: true
    },
    "xAxis": [{
      "type": "category",
      "boundaryGap": false,
      "data": date
    }],
    "yAxis": [{
      "type": "value",
      "boundaryGap": [0, 0.1]
    }],
    "series": //   [{
    //   "name": "充值",
    //   "type": "line",
    //   "data": [0],
    //   "markLine": {
    //     "data": [{
    //       "type": "average",
    //     }]
    //   }
    // }]
      opt.map(function (i, k) {
        return {
          name: i.name,
          "type": "line",
          "data": i.data,
          // "markLine": {
          //   "data": date.length > 1 && date.length < 8 ? [{
          //     "type": "average",
          //     name:'平均值'
          //   }] : '',
          //   label:{
          //     normal:{
          //       position:'middle'
          //     }
          //   }
          // },
          markPoint: {
            // symbol:'circle',
            symbolSize:80,
            label:{
              normal:{
                formatter:({value}) => {
                  let valueW
                  if(value >= 10000) {
                     valueW = value / 1e4
                    return round(valueW, valueW >= 100 ? 0 : 2) + '万'
                  }else{
                    return parseInt(value)
                  }
                }
              }
            },
            data: date.length > 1 ? [
              {type: 'max'},
            ] : ''
          },
          // "label": {
          //   "normal": {
          //     show: true,
          //     // show:date.length > 7 ? false : true,
          //     // position: ['100%', '-300%'],
          //   }
          // },
          // itemStyle: {
          //   normal: {
          //     color: colors[k]
          //   }
          // },
        }
      })
  })

  // date.length > 1 && chart.on('legendselectchanged',({selected,name}) => {
  //   each(selected,(v,k) => {
  //     k != name &&
  //     chart.dispatchAction({type:'legendUnSelect',name:k})
  //   })
  // })
}

// window.initChartYue = initChartYue