同步老项目

.gitignore

@@ -3,6 +3,24 @@ node_modules
 dist
 dist-ssr
 *.local
-yarn.lock
-yarn-error.log
 .vscode
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env.development

package.json

@@ -26,8 +26,8 @@
     "@kangc/v-md-editor": "^2.3.5",
     "@vueuse/core": "^4.10.0",
     "axios": "^0.21.1",
-    "mockjs": "^1.1.0",
     "normalize.css": "^8.0.1",
+    "echarts": "^5.2.0",
     "throttle-debounce": "^3.0.1"
   },
   "devDependencies": {

src/api/querydata/jimubiaobiao.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+let url = '/jiMuBaoBiao'
+
+export function zhuYuanShiJianChao(startTime, endTime) {
+  return request({
+    url: url + '/zhuYuanShiJianChao',
+    method: 'get',
+    params: { startTime, endTime },
+  })
+}
+
+export function zhuYuanHuanZhePingJunZhuYuanRiQi(startTime, endTime) {
+  return request({
+    url: url + '/zhuYuanHuanZhePingJunZhuYuanRiQi',
+    method: 'get',
+    params: { startTime, endTime },
+  })
+}

src/store/modules/charts.js

@@ -0,0 +1,18 @@
+const state = () => ({
+  echartsZhuTi: 'customed',
+})
+// mutations
+const mutations = {
+  setEchartsZhuTi(state, echartsZhuTi) {
+    state.echartsZhuTi = echartsZhuTi
+  },
+}
+
+const actions = {}
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+}

src/utils/date.js

@@ -67,8 +67,7 @@ export function getOneMonthOffset() {
   let year = myDate.getFullYear()
   let month = myDate.getMonth()
   let date = myDate.getDate()
-  let end =
-    year + '-' + ('0' + (month + 1)).slice(-2) + '-' + ('0' + date).slice(-2)
+  let end = year + '-' + ('0' + (month + 1)).slice(-2) + '-' + ('0' + date).slice(-2)
   if (month === 0) {
     year -= 1
     month = 12
@@ -77,8 +76,7 @@ export function getOneMonthOffset() {
   } else {
     date = date > 30 ? 30 : date
   }
-  let start =
-    year + '-' + ('0' + month).slice(-2) + '-' + ('0' + date).slice(-2)
+  let start = year + '-' + ('0' + month).slice(-2) + '-' + ('0' + date).slice(-2)
   return { start, end }
 }
 
@@ -88,10 +86,10 @@ export function getDateRangeFormatDate(data) {
   //用户手动输入了日期 并且没有按下大键盘上面的回车
   if (data === null) return { stratTime, endTime }
   if (typeof data[0].$d !== 'undefined') {
-    stratTime = formatDate(data[0].$d)
+    stratTime = formatDate(data[0].$d) + ' 00:00:00'
     endTime = formatDate(data[1].$d) + ' 23:59:59'
   } else if (data !== null) {
-    stratTime = formatDate(data[0])
+    stratTime = formatDate(data[0]) + ' 00:00:00'
     endTime = formatDate(data[1]) + ' 23:59:59'
   }
   return { stratTime, endTime }

src/utils/echarts-utils.js

@@ -0,0 +1,100 @@
+import * as echarts from 'echarts'
+
+export function pieUtils(id, name, data) {
+  // 验证 这个 是否被创建了
+  let linearBarDom = echarts.getInstanceByDom(id)
+
+  if (linearBarDom == null) {
+    linearBarDom = echarts.init(id)
+  }
+
+  linearBarDom.setOption({
+    title: {
+      text: name, // 设置主标题文本
+      show: true, // 显示标题组件
+      x: 'left', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
+      y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
+      padding: [10, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+    },
+    // 这个就是旁边的那个颜色小方块
+    legend: {
+      //朝向 ： 垂直
+      orient: 'vertical',
+      x: 'right', //可设定图例在left、right、center
+      y: 'top', //可设定图例在top、bottom、center
+      padding: [10, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+      // 这个是 圆形旁边的 小方块 自定义
+      formatter: function (name) {
+        // 通过name获取到数组对象中的单个对象
+        let singleData = data.filter(function (item) {
+          return item.name == name
+        })
+        return `${name} | ${singleData[0].value} ${singleData[0].unit}`
+      },
+    },
+    tooltip: {
+      //提示框组件
+      trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
+      // backgroundColor: 'rgba(255,255,255,0.8)', //设置背景图片 rgba格式
+      // color: 'black',
+      // borderWidth: '1', //边框宽度设置1
+      // borderColor: 'gray', //设置边框颜色
+      // textStyle: {
+      //   color: 'black', //设置文字颜色
+      // },
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
+      // formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+      //原来的 替换成我需要的 这个是鼠标移上去出现的
+      formatter: function (data) {
+        return `
+        <span style="background-color:${data.color};display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px"></span>
+              <span>${data.seriesName}<span><br/>
+              <span>${data.name} : <span style="color:red;">${data.value}</span> ${data.data.unit}<span><br/>
+              <span>百分比 : ${data.percent} %</span>
+              `
+      },
+    },
+    series: [
+      {
+        center: ['50%', '50%'],
+        radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+        type: 'pie', // 类型 圆形
+        data: data, // 数据
+        name: name, // 名字
+        minAngle: 10, //设置扇形的最小占比 不然有些太小了 就看不到了
+      },
+    ],
+    //color: createColorCode(data),
+  })
+  window.onresize = function () {
+    //自适应大小, 不用的话不会自适应大小。
+    linearBarDom.resize()
+  }
+}
+
+// 主题注册
+export function echartsZhuTiZhuCe() {
+  zhuTi.filter((item) => {
+    echarts.registerTheme(item.zhuTiName, item)
+  })
+}
+
+// 随机生成 颜色
+export function createColorCode(data) {
+  console.log(data)
+  var list = []
+  for (let i = 0; i < data.length; i++) {
+    let color = ''
+    let r = Math.floor(Math.random() * 256)
+    let g = Math.floor(Math.random() * 256)
+    let b = Math.floor(Math.random() * 256)
+    color = `rgb(${r},${g},${b})`
+    console.log(color)
+    list.push(color)
+  }
+  console.log(list)
+  return list
+}

src/utils/echarts-zhu-ti.js

@@ -0,0 +1,4357 @@
+export const zhuTi = [
+  {
+    zhuTiName: 'vintage',
+    color: ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'],
+    backgroundColor: 'rgba(254,248,239,1)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#333333',
+      },
+      subtextStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#c23531',
+        color0: '#314656',
+        borderColor: '#c23531',
+        borderColor0: '#314656',
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+      color: ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#444444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#444444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#293c55',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#293c55',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#293c55',
+        borderColor: '#293c55',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#e43c59',
+        borderColor: '#c23531',
+      },
+      label: {
+        color: '#293c55',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#a9334c',
+        },
+        controlStyle: {
+          color: '#293c55',
+          borderColor: '#293c55',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#293c55',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#bf444c', '#d88273', '#f6efa6'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(47,69,84,0)',
+      dataBackgroundColor: 'rgba(47,69,84,0.3)',
+      fillerColor: 'rgba(167,183,204,0.4)',
+      handleColor: '#a7b7cc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'dark',
+    color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
+    backgroundColor: 'rgba(51,51,51,1)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#eeeeee',
+      },
+      subtextStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#fd1050',
+        color0: '#0cf49b',
+        borderColor: '#fd1050',
+        borderColor0: '#0cf49b',
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+      color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#eee',
+        borderColor: '#444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#eee',
+        borderColor: '#444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#eeeeee',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#aaaaaa'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#eeeeee',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#aaaaaa'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#eeeeee',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#aaaaaa'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#eeeeee',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#eeeeee',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#aaaaaa'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#eeeeee',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#eeeeee',
+          width: '1',
+        },
+        crossStyle: {
+          color: '#eeeeee',
+          width: '1',
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#eeeeee',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#dd6b66',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#eeeeee',
+        borderColor: '#eeeeee',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#e43c59',
+        borderColor: '#c23531',
+      },
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#a9334c',
+        },
+        controlStyle: {
+          color: '#eeeeee',
+          borderColor: '#eeeeee',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#bf444c', '#d88273', '#f6efa6'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(47,69,84,0)',
+      dataBackgroundColor: 'rgba(255,255,255,0.3)',
+      fillerColor: 'rgba(167,183,204,0.4)',
+      handleColor: '#a7b7cc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#eeeeee',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'westeros',
+    color: ['#516b91', '#59c4e6', '#edafda', '#93b7e3', '#a5e7f0', '#cbb0e3'],
+    backgroundColor: 'rgba(0,0,0,0)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#516b91',
+      },
+      subtextStyle: {
+        color: '#93b7e3',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '2',
+      },
+      symbolSize: '6',
+      symbol: 'emptyCircle',
+      smooth: true,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '2',
+      },
+      symbolSize: '6',
+      symbol: 'emptyCircle',
+      smooth: true,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#edafda',
+        color0: 'transparent',
+        borderColor: '#d680bc',
+        borderColor0: '#8fd3e8',
+        borderWidth: '2',
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: '6',
+      symbol: 'emptyCircle',
+      smooth: true,
+      color: ['#516b91', '#59c4e6', '#edafda', '#93b7e3', '#a5e7f0', '#cbb0e3'],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#f3f3f3',
+        borderColor: '#516b91',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#a5e7f0',
+          borderColor: '#516b91',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#516b91',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#f3f3f3',
+        borderColor: '#516b91',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#a5e7f0',
+          borderColor: '#516b91',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#516b91',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#8fd3e8',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#8fd3e8',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#8fd3e8',
+        borderColor: '#8fd3e8',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#8fd3e8',
+        borderColor: '#8a7ca8',
+      },
+      label: {
+        color: '#8fd3e8',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#8fd3e8',
+        },
+        controlStyle: {
+          color: '#8fd3e8',
+          borderColor: '#8fd3e8',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#8fd3e8',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#516b91', '#59c4e6', '#a5e7f0'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(0,0,0,0)',
+      dataBackgroundColor: 'rgba(255,255,255,0.3)',
+      fillerColor: 'rgba(167,183,204,0.4)',
+      handleColor: '#a7b7cc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'essos',
+    color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+    backgroundColor: 'rgba(242,234,191,0.15)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#893448',
+      },
+      subtextStyle: {
+        color: '#d95850',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '2',
+      },
+      symbolSize: '6',
+      symbol: 'emptyCircle',
+      smooth: true,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '2',
+      },
+      symbolSize: '6',
+      symbol: 'emptyCircle',
+      smooth: true,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#eb8146',
+        color0: 'transparent',
+        borderColor: '#d95850',
+        borderColor0: '#58c470',
+        borderWidth: '2',
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: '6',
+      symbol: 'emptyCircle',
+      smooth: true,
+      color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+      label: {
+        color: '#ffffff',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#f3f3f3',
+        borderColor: '#999999',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#893448',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#ffb248',
+          borderColor: '#eb8146',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#893448',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#f3f3f3',
+        borderColor: '#999999',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#893448',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#ffb248',
+          borderColor: '#eb8146',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#893448',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#aaaaaa',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#aaaaaa',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#aaaaaa',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#aaaaaa',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#893448',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#893448',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#893448',
+        borderColor: '#893448',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#eb8146',
+        borderColor: '#ffb248',
+      },
+      label: {
+        color: '#893448',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#ffb248',
+        },
+        controlStyle: {
+          color: '#893448',
+          borderColor: '#893448',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#893448',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', 'rgb(247,238,173)'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(255,255,255,0)',
+      dataBackgroundColor: 'rgba(255,178,72,0.5)',
+      fillerColor: 'rgba(255,178,72,0.15)',
+      handleColor: '#ffb248',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#ffffff',
+      },
+      emphasis: {
+        label: {
+          color: '#ffffff',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'wonderland',
+    color: ['#4ea397', '#22c3aa', '#7bd9a5', '#d0648a', '#f58db2', '#f2b3c9'],
+    backgroundColor: 'rgba(255,255,255,0)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#666666',
+      },
+      subtextStyle: {
+        color: '#999999',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '8',
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '8',
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#d0648a',
+        color0: 'transparent',
+        borderColor: '#d0648a',
+        borderColor0: '#22c3aa',
+        borderWidth: '1',
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: '1',
+        color: '#cccccc',
+      },
+      symbolSize: '8',
+      symbol: 'emptyCircle',
+      smooth: false,
+      color: ['#4ea397', '#22c3aa', '#7bd9a5', '#d0648a', '#f58db2', '#f2b3c9'],
+      label: {
+        color: '#ffffff',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#999999',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#28544e',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(34,195,170,0.25)',
+          borderColor: '#22c3aa',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#349e8e',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#999999',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#28544e',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(34,195,170,0.25)',
+          borderColor: '#22c3aa',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#349e8e',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#4ea397',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#4ea397',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#4ea397',
+        borderColor: '#4ea397',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#4ea397',
+        borderColor: '#3cebd2',
+      },
+      label: {
+        color: '#4ea397',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#4ea397',
+        },
+        controlStyle: {
+          color: '#4ea397',
+          borderColor: '#4ea397',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#4ea397',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#d0648a', '#22c3aa', '#adfff1'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(255,255,255,0)',
+      dataBackgroundColor: 'rgba(222,222,222,1)',
+      fillerColor: 'rgba(114,230,212,0.25)',
+      handleColor: '#cccccc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#ffffff',
+      },
+      emphasis: {
+        label: {
+          color: '#ffffff',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'walden',
+    color: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad', '#96dee8'],
+    backgroundColor: 'rgba(252,252,252,0)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#666666',
+      },
+      subtextStyle: {
+        color: '#999999',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '8',
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '8',
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#e6a0d2',
+        color0: 'transparent',
+        borderColor: '#e6a0d2',
+        borderColor0: '#3fb1e3',
+        borderWidth: '2',
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: '1',
+        color: '#cccccc',
+      },
+      symbolSize: '8',
+      symbol: 'emptyCircle',
+      smooth: false,
+      color: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad', '#96dee8'],
+      label: {
+        color: '#ffffff',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#aaaaaa',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#ffffff',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(63,177,227,0.25)',
+          borderColor: '#3fb1e3',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#3fb1e3',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#aaaaaa',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#ffffff',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(63,177,227,0.25)',
+          borderColor: '#3fb1e3',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#3fb1e3',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#999999',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eeeeee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#626c91',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#626c91',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#626c91',
+        borderColor: '#626c91',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#3fb1e3',
+        borderColor: '#3fb1e3',
+      },
+      label: {
+        color: '#626c91',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#626c91',
+        },
+        controlStyle: {
+          color: '#626c91',
+          borderColor: '#626c91',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#626c91',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#2a99c9', '#afe8ff'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(255,255,255,0)',
+      dataBackgroundColor: 'rgba(222,222,222,1)',
+      fillerColor: 'rgba(114,230,212,0.25)',
+      handleColor: '#cccccc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#ffffff',
+      },
+      emphasis: {
+        label: {
+          color: '#ffffff',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'chalk',
+    color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'],
+    backgroundColor: 'rgba(41,52,65,1)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#ffffff',
+      },
+      subtextStyle: {
+        color: '#dddddd',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: '4',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '0',
+      symbol: 'circle',
+      smooth: true,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: '4',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '0',
+      symbol: 'circle',
+      smooth: true,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#fc97af',
+        color0: 'transparent',
+        borderColor: '#fc97af',
+        borderColor0: '#87f7cf',
+        borderWidth: '2',
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: '1',
+        color: '#ffffff',
+      },
+      symbolSize: '0',
+      symbol: 'circle',
+      smooth: true,
+      color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'],
+      label: {
+        color: '#293441',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#f3f3f3',
+        borderColor: '#999999',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#893448',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,178,72,1)',
+          borderColor: '#eb8146',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(137,52,72)',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#f3f3f3',
+        borderColor: '#999999',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#893448',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,178,72,1)',
+          borderColor: '#eb8146',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(137,52,72)',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#666666',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#aaaaaa',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#666666',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#aaaaaa',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#666666',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#aaaaaa',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#666666',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#aaaaaa',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#e6e6e6'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#87f7cf',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#87f7cf',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#87f7cf',
+        borderColor: '#87f7cf',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#fc97af',
+        borderColor: '#fc97af',
+      },
+      label: {
+        color: '#87f7cf',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#f7f494',
+        },
+        controlStyle: {
+          color: '#87f7cf',
+          borderColor: '#87f7cf',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#87f7cf',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#fc97af', '#87f7cf'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(255,255,255,0)',
+      dataBackgroundColor: 'rgba(114,204,255,1)',
+      fillerColor: 'rgba(114,204,255,0.2)',
+      handleColor: '#72ccff',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#293441',
+      },
+      emphasis: {
+        label: {
+          color: '#293441',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'infographic',
+    color: ['#c1232b', '#27727b', '#fcce10', '#e87c25', '#b5c334', '#fe8463', '#9bca63', '#fad860', '#f3a43b', '#60c0dd', '#d7504b', '#c6e579', '#f4e001', '#f0805a', '#26c0c0'],
+    backgroundColor: 'rgba(0,0,0,0)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#27727b',
+      },
+      subtextStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '5',
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '5',
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#c1232b',
+        color0: '#b5c334',
+        borderColor: '#c1232b',
+        borderColor0: '#b5c334',
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: '5',
+      symbol: 'emptyCircle',
+      smooth: false,
+      color: ['#c1232b', '#27727b', '#fcce10', '#e87c25', '#b5c334', '#fe8463', '#9bca63', '#fad860', '#f3a43b', '#60c0dd', '#d7504b', '#c6e579', '#f4e001', '#f0805a', '#26c0c0'],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#dddddd',
+        borderColor: '#eeeeee',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#c1232b',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#fe994e',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#dddddd',
+        borderColor: '#eeeeee',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#c1232b',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#fe994e',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#27727b',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#27727b',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#27727b',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#27727b',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#c1232b',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#e87c25',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#27727b',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#27727b',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#293c55',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#27727b',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#27727b',
+        borderColor: '#27727b',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#c1232b',
+        borderColor: '#c23531',
+      },
+      label: {
+        color: '#293c55',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#72d4e0',
+        },
+        controlStyle: {
+          color: '#27727b',
+          borderColor: '#27727b',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#293c55',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#c1232b', '#fcce10'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(0,0,0,0)',
+      dataBackgroundColor: 'rgba(181,195,52,0.3)',
+      fillerColor: 'rgba(181,195,52,0.2)',
+      handleColor: '#27727b',
+      handleSize: '100%',
+      textStyle: {
+        color: '#999999',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'macarons',
+    color: [
+      '#2ec7c9',
+      '#b6a2de',
+      '#5ab1ef',
+      '#ffb980',
+      '#d87a80',
+      '#8d98b3',
+      '#e5cf0d',
+      '#97b552',
+      '#95706d',
+      '#dc69aa',
+      '#07a2a4',
+      '#9a7fd1',
+      '#588dd5',
+      '#f5994e',
+      '#c05050',
+      '#59678c',
+      '#c9ab00',
+      '#7eb00a',
+      '#6f5553',
+      '#c14089',
+    ],
+    backgroundColor: 'rgba(0,0,0,0)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#008acd',
+      },
+      subtextStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 3,
+      symbol: 'emptyCircle',
+      smooth: true,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 3,
+      symbol: 'emptyCircle',
+      smooth: true,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#d87a80',
+        color0: '#2ec7c9',
+        borderColor: '#d87a80',
+        borderColor0: '#2ec7c9',
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: 3,
+      symbol: 'emptyCircle',
+      smooth: true,
+      color: [
+        '#2ec7c9',
+        '#b6a2de',
+        '#5ab1ef',
+        '#ffb980',
+        '#d87a80',
+        '#8d98b3',
+        '#e5cf0d',
+        '#97b552',
+        '#95706d',
+        '#dc69aa',
+        '#07a2a4',
+        '#9a7fd1',
+        '#588dd5',
+        '#f5994e',
+        '#c05050',
+        '#59678c',
+        '#c9ab00',
+        '#7eb00a',
+        '#6f5553',
+        '#c14089',
+      ],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#dddddd',
+        borderColor: '#eeeeee',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#d87a80',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(254,153,78,1)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#dddddd',
+        borderColor: '#eeeeee',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#d87a80',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(254,153,78,1)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#008acd',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#eee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#008acd',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eee'],
+        },
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#008acd',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eee'],
+        },
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#008acd',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#eee'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#2ec7c9',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#18a4a6',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#008acd',
+          width: '1',
+        },
+        crossStyle: {
+          color: '#008acd',
+          width: '1',
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#008acd',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#008acd',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#008acd',
+        borderColor: '#008acd',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#2ec7c9',
+        borderColor: '#2ec7c9',
+      },
+      label: {
+        color: '#008acd',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#a9334c',
+        },
+        controlStyle: {
+          color: '#008acd',
+          borderColor: '#008acd',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#008acd',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#5ab1ef', '#e0ffff'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(47,69,84,0)',
+      dataBackgroundColor: '#efefff',
+      fillerColor: 'rgba(182,162,222,0.2)',
+      handleColor: '#008acd',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'roma',
+    color: [
+      '#e01f54',
+      '#001852',
+      '#f5e8c8',
+      '#b8d2c7',
+      '#c6b38e',
+      '#a4d8c2',
+      '#f3d999',
+      '#d3758f',
+      '#dcc392',
+      '#2e4783',
+      '#82b6e9',
+      '#ff6347',
+      '#a092f1',
+      '#0a915d',
+      '#eaf889',
+      '#6699ff',
+      '#ff6666',
+      '#3cb371',
+      '#d5b158',
+      '#38b6b6',
+    ],
+    backgroundColor: 'rgba(0,0,0,0)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#333333',
+      },
+      subtextStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#e01f54',
+        color0: '#001852',
+        borderColor: '#f5e8c8',
+        borderColor0: '#b8d2c7',
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+      color: [
+        '#e01f54',
+        '#001852',
+        '#f5e8c8',
+        '#b8d2c7',
+        '#c6b38e',
+        '#a4d8c2',
+        '#f3d999',
+        '#d3758f',
+        '#dcc392',
+        '#2e4783',
+        '#82b6e9',
+        '#ff6347',
+        '#a092f1',
+        '#0a915d',
+        '#eaf889',
+        '#6699ff',
+        '#ff6666',
+        '#3cb371',
+        '#d5b158',
+        '#38b6b6',
+      ],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#444444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#eeeeee',
+        borderColor: '#444444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#293c55',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#293c55',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#293c55',
+        borderColor: '#293c55',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#e43c59',
+        borderColor: '#c23531',
+      },
+      label: {
+        color: '#293c55',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#a9334c',
+        },
+        controlStyle: {
+          color: '#293c55',
+          borderColor: '#293c55',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#293c55',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#e01f54', '#e7dbc3'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(47,69,84,0)',
+      dataBackgroundColor: 'rgba(47,69,84,0.3)',
+      fillerColor: 'rgba(167,183,204,0.4)',
+      handleColor: '#a7b7cc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'shine',
+    color: ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'],
+    backgroundColor: 'rgba(0,0,0,0)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#333333',
+      },
+      subtextStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#c12e34',
+        color0: '#2b821d',
+        borderColor: '#c12e34',
+        borderColor0: '#2b821d',
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: 4,
+      symbol: 'emptyCircle',
+      smooth: false,
+      color: ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#ddd',
+        borderColor: '#eee',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#c12e34',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#e6b600',
+          borderColor: '#ddd',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#c12e34',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#ddd',
+        borderColor: '#eee',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#c12e34',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#e6b600',
+          borderColor: '#ddd',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#c12e34',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#333',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: ['#ccc'],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#06467c',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#4187c2',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#005eaa',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#005eaa',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#005eaa',
+        borderColor: '#005eaa',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#005eaa',
+        borderColor: '#316bc2',
+      },
+      label: {
+        color: '#005eaa',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#005eaa',
+        },
+        controlStyle: {
+          color: '#005eaa',
+          borderColor: '#005eaa',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#005eaa',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#1790cf', '#a2d4e6'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(47,69,84,0)',
+      dataBackgroundColor: 'rgba(47,69,84,0.3)',
+      fillerColor: 'rgba(167,183,204,0.4)',
+      handleColor: '#a7b7cc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+
+  {
+    zhuTiName: 'purple-passion',
+    color: ['#9b8bba', '#e098c7', '#8fd3e8', '#71669e', '#cc70af', '#7cb4cc'],
+    backgroundColor: 'rgba(91,92,110,1)',
+    textStyle: {},
+    title: {
+      textStyle: {
+        color: '#ffffff',
+      },
+      subtextStyle: {
+        color: '#cccccc',
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '7',
+      symbol: 'circle',
+      smooth: true,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: '2',
+      },
+      lineStyle: {
+        width: '3',
+      },
+      symbolSize: '7',
+      symbol: 'circle',
+      smooth: true,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc',
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#e098c7',
+        color0: 'transparent',
+        borderColor: '#e098c7',
+        borderColor0: '#8fd3e8',
+        borderWidth: '2',
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#ccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: '7',
+      symbol: 'circle',
+      smooth: true,
+      color: ['#9b8bba', '#e098c7', '#8fd3e8', '#71669e', '#cc70af', '#7cb4cc'],
+      label: {
+        color: '#eeeeee',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#eee',
+        borderColor: '#444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#e098c7',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#ffffff',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#eee',
+        borderColor: '#444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#e098c7',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#ffffff',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#cccccc',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#eeeeee', '#333333'],
+        },
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#cccccc',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#eeeeee', '#333333'],
+        },
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#cccccc',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#eeeeee', '#333333'],
+        },
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#cccccc',
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#cccccc',
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: ['#eeeeee', '#333333'],
+        },
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#666666',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: '#cccccc',
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: '#8fd3e8',
+        width: 1,
+      },
+      itemStyle: {
+        color: '#8fd3e8',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#8fd3e8',
+        borderColor: '#8fd3e8',
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: '#8fd3e8',
+        borderColor: '#8a7ca8',
+      },
+      label: {
+        color: '#8fd3e8',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#8fd3e8',
+        },
+        controlStyle: {
+          color: '#8fd3e8',
+          borderColor: '#8fd3e8',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#8fd3e8',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#8a7ca8', '#e098c7', '#cceffa'],
+    },
+    dataZoom: {
+      backgroundColor: 'rgba(0,0,0,0)',
+      dataBackgroundColor: 'rgba(255,255,255,0.3)',
+      fillerColor: 'rgba(167,183,204,0.4)',
+      handleColor: '#a7b7cc',
+      handleSize: '100%',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#eeeeee',
+      },
+      emphasis: {
+        label: {
+          color: '#eeeeee',
+        },
+      },
+    },
+  },
+]

src/views/data-modify/SecondFefund.vue

@@ -18,6 +18,7 @@
           <el-table-column prop="name" label="姓名"></el-table-column>
           <el-table-column prop="tcName" label="项目名称" show-overflow-tooltip></el-table-column>
           <el-table-column prop="chargeItemCode" label="编码"></el-table-column>
+          <el-table-column prop="itemNo" label="编码"></el-table-column>
         </el-table>
         <el-pagination
           :pager-count="5"
@@ -186,6 +187,10 @@ export default {
           mzChargeDateil.value.quantity = quantity.value
           xiuGaiTuiFei(mzChargeDateil.value).then((res) => {
             mzChargeDateil.value = {}
+            getMzTuiFei(mzTuiFei.value).then((res) => {
+              mzChargeDateilData.value = res.data
+              mzTuiFei.value.total = res.total
+            })
           })
           mzChargeDateil.value.quantity = linShi
         })

src/views/data-modify/YzActOrderModify.vue

@@ -50,8 +50,15 @@
         </el-pagination>
       </el-aside>
       <el-main>
+        <!-- 申请修改医嘱的开始时间和结束时间 -->
+        <span>开始时间：</span><el-date-picker type="datetime" placeholder="选择开始时间" size="mini" v-model="tianJiaShenHe.startTime"></el-date-picker>
+        <el-divider direction="vertical"></el-divider>
+        <span>结束时间：</span><el-date-picker type="datetime" placeholder="选择结束时间" size="mini" v-model="tianJiaShenHe.endTime"></el-date-picker>
+        <el-divider direction="vertical"></el-divider>
+        <el-button @click="tijiaoshenqing" size="mini" type="success">提交</el-button>
+        <el-divider></el-divider>
         <!-- 这里是添加审核医嘱到表格中 -->
-        <el-table :data="tianJiaShenHe.list" :height="tableHeight - 200">
+        <el-table :data="tianJiaShenHe.list" :height="tableHeight - 28">
           <el-table-column label="患者姓名" width="70" prop="patientName"></el-table-column>
           <el-table-column label="住院号" width="70" prop="inpatientNo"></el-table-column>
           <el-table-column label="医嘱号" show-overflow-tooltip width="70" prop="actOrderNo"></el-table-column>
@@ -66,27 +73,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-divider></el-divider>
-        <!-- 申请修改医嘱的开始时间和结束时间 -->
-        <div>
-          <el-form label-width="100px">
-            <el-row>
-              <el-col :span="10">
-                <el-form-item label="开始时间:">
-                  <el-date-picker type="datetime" placeholder="选择时间" v-model="tianJiaShenHe.startTime"></el-date-picker>
-                </el-form-item>
-              </el-col>
-              <el-col :span="10">
-                <el-form-item label="结束时间:">
-                  <el-date-picker type="datetime" placeholder="选择时间" v-model="tianJiaShenHe.endTime"></el-date-picker>
-                </el-form-item>
-              </el-col>
-              <el-col :offset="1" :span="5">
-                <el-button @click="tijiaoshenqing" size="small" type="success">提交</el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-        </div>
+
         <!-- 这里是查看审核状态的 -->
         <el-dialog v-model="dialogFormVisible" title="审核状态" :width="900">
           住院号：

src/views/examination/UploadToHealthCard.vue

@@ -47,11 +47,11 @@
 
 <script>
 import { onMounted, ref } from 'vue'
-import { healthCardShortcuts } from '@/data/shortcuts'
+import { healthCardShortcuts } from '../../data/shortcuts'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getIndexByBarCode, getIndexByTjNo, pushSelectedResult } from '@/api/inspections'
-import store from '@/store'
-import { formatDate } from '@/utils/date'
+import { getIndexByBarCode, getIndexByTjNo, pushSelectedResult } from '../../api/inspections'
+import store from '../../store'
+import { formatDate } from '../../utils/date'
 export default {
   name: 'UploadToHealthCard',
   setup() {
@@ -84,7 +84,6 @@ export default {
       }
     }
 
-    // 210419146000001
     const scanBarCode = () => {
       ElMessageBox.prompt('请扫描或输入健康证条码', '提示', {
         confirmButtonText: '确定',
@@ -152,7 +151,7 @@ export default {
       let jk01 = false
       let jk02 = false
       val.forEach((item) => {
-        if (item.aply_CTNT.indexOf('大便培养') !== -1) {
+        if (item.aply_CTNT.indexOf('大便培养') !== -1 || item.aply_CTNT.indexOf('大便体检') !== -1) {
           jk01 = true
         }
         if (item.aply_CTNT.indexOf('甲肝抗体') !== -1 && item.aply_CTNT.indexOf('戊肝抗体') !== -1) {

src/views/hospitalization/XiangMuLuRu.vue

@@ -6,6 +6,8 @@
       <el-tag>床号: {{ patient.bedNo }}</el-tag>
       <el-tag>住院次数: {{ patient.admissTimes }}</el-tag>
       <el-tag>性别: {{ cptSex(patient.sex) }}</el-tag>
+      住院号： <el-input v-model="inpatientNo" size="mini" style="width: 100px" clearable placeholder="住院号"></el-input>
+      <el-button size="mini" type="primary" icon="el-icon-search" @click="chaXunHuanZheXinXi">查询患者信息</el-button>
       <el-button size="mini" type="warning" style="margin-left: 20px" icon="el-icon-close" @click="guanBiDialog">关闭</el-button>
     </el-header>
     <el-container>
@@ -19,12 +21,24 @@
                 <span>{{ item.name }}</span>
               </el-option>
             </el-select>
-            <el-select v-model="patient.tuiFeiFlag" size="mini" @change="tuiFeiZhuangTaiChaKan">
+            录入日期：<el-date-picker type="date" placeholder="选择日期" size="mini" style="width: 120px" v-model="patient.startTime"></el-date-picker> 退费：<el-select
+              v-model="patient.tuiFeiFlag"
+              style="width: 120px"
+              size="mini"
+              @change="tuiFeiZhuangTaiChaKan"
+            >
               <el-option :key="0" :value="0" label="全部"></el-option>
               <el-option :key="1" :value="1" label="未退费"></el-option>
               <el-option :key="3" :value="3" label="已退费"></el-option>
             </el-select>
+            费用类型：<el-select v-model="patient.orderNo" style="width: 120px" size="mini" @change="queryFeiYong">
+              <el-option :key="0" :value="0" label="护士录入"></el-option>
+              <el-option :key="1" :value="1" label="医嘱"></el-option>
+              <el-option :key="3" :value="3" label="医技"></el-option>
+              <el-option :key="4" :value="4" label="全部"></el-option>
+            </el-select>
             <el-button size="mini" type="primary" @click="queryXiangMu" icon="el-icon-search">查询</el-button>
+            <el-button size="mini" type="primary" @click="shuaXinFeiYong" icon="el-icon-refresh-left">刷新费用</el-button>
             <el-button size="mini" type="danger" @click="xiangMuTuiFeiClick" icon="el-icon-delete-solid">退费</el-button>
             <el-table
               :height="tableHeight"
@@ -74,7 +88,7 @@
             ></el-pagination>
           </el-tab-pane>
           <!-- 项目录入 -->
-          <el-tab-pane label="项目录入" name="xmlr">
+          <el-tab-pane label="项目录入" name="xmlr" v-if="panDuanSFTongGuoBingShiJinRu">
             <el-row>
               <el-col :span="3">
                 <el-table :height="tableHeight + 20" :data="muBanData.slice((muBanCurrentPage - 1) * muBanPageSize, muBanCurrentPage * muBanPageSize)">
@@ -86,7 +100,7 @@
                           <el-button type="text" @click="getMuBanXinXiClick(scope.row)">{{ scope.row.name }}</el-button>
                         </template>
                         <!-- 这里是弹出框中的数据 -->
-                        <el-table :height="tableHeight - 400" :data="muBanXiangQing" @selection-change="xuanZeXiangMuTable">
+                        <el-table :height="tableHeight" :data="muBanXiangQing" @selection-change="xuanZeXiangMuTable">
                           <el-table-column type="selection"></el-table-column>
                           <el-table-column label="项目名称" prop="chargeName"></el-table-column>
                           <el-table-column label="单价" prop="chargeAmount"></el-table-column>
@@ -183,6 +197,10 @@
                   <span style="color: #8492a6; font-size: 12px">{{ item.chargeCode }}</span>
                   <el-divider direction="vertical"></el-divider>
                   <span> {{ item.chargeName }}</span>
+                  <el-divider direction="vertical"></el-divider>
+                  <span style="color: red"> {{ item.ybComment }}</span>
+                  <el-divider direction="vertical"></el-divider>
+                  <span style="color: #e6a23c"> {{ item.chargeAmount }} 元</span>
                 </el-option>
                 <el-pagination
                   @current-change="danGeXiangMuCurrentChange"
@@ -234,7 +252,7 @@
             <el-col :span="24"> 模板名称：<el-input size="mini" v-model="cunMuBanPojo.name" maxlength="15" @blur="zhuanPinYin" show-word-limit></el-input> </el-col>
             <el-col :span="12"> 拼音码：<el-input size="mini" v-model="cunMuBanPojo.pyCode" maxlength="8" show-word-limit></el-input> </el-col>
             <el-col :span="12"> 五笔码：<el-input size="mini" v-model="cunMuBanPojo.dcode" maxlength="8" show-word-limit></el-input> </el-col>
-            <el-col :span="12"> 排序码：<el-input size="mini" v-model="cunMuBanPojo.paiXu" maxlength="7" show-word-limit></el-input> </el-col>
+            <!-- <el-col :span="12"> 排序码：<el-input size="mini" v-model="cunMuBanPojo.paiXu" maxlength="7" show-word-limit></el-input> </el-col> -->
             <el-col :span="12"> 创建科室：<el-input size="mini" v-model="cunMuBanPojo.dept" disabled></el-input> </el-col>
             <el-col :span="12">
               <el-button size="mini" style="margin-top: 10px" icon="el-icon-upload" type="primary" @click="baoCunMuBan">保存</el-button>
@@ -254,19 +272,28 @@ import { getChargeCode, getHuanZheFeiYong, getMuBan, getMuBanXinXi, xiangMuTuiFe
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { costState } from '@/utils/computed'
 import Cookie from 'js-cookie'
-import { getDatetime } from '@/utils/date'
+import { formatDate, getDatetime } from '@/utils/date'
 import { getWard } from '@/api/yz-data-mod/yz-temperature-modify'
 import { clone } from '@/utils/clone'
 import { getWb, getPy } from '@/utils/pingyin'
-import router from '@/router'
+import { getPatientInfo } from '@/api/yibao/patient'
 import { baseinfo } from '@/data/inpatient'
+
 export default {
-  setup() {
+  props: {
+    init: {
+      type: Number,
+      default: -1,
+    },
+  },
+  setup(props, ctx) {
     const windowSize = store.state.app.windowSize
     const tableHeight = windowSize.h - 170
     // 默认选中已录入项目
     const xmlrTabs = ref('ylrxm')
 
+    const inpatientNo = ref('')
+
     /**
      * 录入费用 表格
      */
@@ -276,6 +303,9 @@ export default {
     const muBanData = ref([])
     // 获取全部科室
     const deptData = ref([])
+
+    //
+    const patient = ref({})
     /**
      * 监听 xmlrTabs 如果变化了 就加载 模板数据 如果模板数据已经存在了就不加载
      */
@@ -299,44 +329,92 @@ export default {
     })
 
     /**
-     * 默认加载 患者费用
+     * 判断这个操作员是否可以退费
      */
-    onMounted(() => {
-      patient.value.currentPage = 1
-      patient.value.pageSize = 40
-      patient.value.total = 0
-      patient.value.tuiFeiFlag = 0
-      patient.value.deptCode = Cookie.get('dept')
-      if (Cookie.get('dept') !== '3100000') {
-        ElMessage.error({
-          message: '该功能正在开发中',
+    const panDuanSFTongGuoBingShiJinRu = ref(false)
+
+    // 弹框 输入住院号
+    const jinRuPanDuanSFXieDaiHuanZheXinXi = () => {
+      ElMessageBox.prompt('请输入患者住院号', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /\S/,
+        inputErrorMessage: '患者住院号不能为空 (∩•̀ω•́)⊃-*⋆',
+        type: 'warning',
+      })
+        .then(({ value }) => {
+          inpatientNo.value = value
+          chaXunHuanZheXinXi()
         })
-        router.go(-1)
-      }
-      queryFeiYong()
-    })
+        .catch(() => {
+          guanBiDialog()
+        })
+    }
+
+    const chaXunHuanZheXinXi = () => {
+      getPatientInfo(inpatientNo.value)
+        .then((res) => {
+          patient.value = res
+          patient.value.currentPage = 1
+          patient.value.pageSize = 40
+          patient.value.total = 0
+          patient.value.tuiFeiFlag = 0
+          patient.value.deptCode = Cookie.get('dept')
+          queryFeiYong()
+          if (patient.value.ward === Cookie.get('dept')) {
+            panDuanSFTongGuoBingShiJinRu.value = true
+          } else {
+            xmlrTabs.value = 'ylrxm'
+            panDuanSFTongGuoBingShiJinRu.value = false
+          }
+        })
+        .catch(() => {
+          patient.value = {}
+          jinRuPanDuanSFXieDaiHuanZheXinXi()
+        })
+    }
     /**
      * 查询
      */
     const queryFeiYong = () => {
+      if (typeof patient.value.startTime !== 'undefined') {
+        if (patient.value.startTime !== null) {
+          patient.value.startTime = formatDate(patient.value.startTime)
+        }
+      }
       getHuanZheFeiYong(patient.value).then((res) => {
         tableDataHuanZheFeiYong.value = res
         cptTableDataHuanZheFeiYong.value = res
         patient.value.total = cptTableDataHuanZheFeiYong.value.length
+        tuiFeiZhuangTaiChaKan(patient.value.tuiFeiFlag)
+        if (patient.value.admissWard === Cookie.get('dept')) {
+          panDuanSFTongGuoBingShiJinRu.value = true
+        }
       })
     }
-    /**
-     * 获取选择的病人
-     */
-    const patient = computed(() => {
-      return baseinfo()
-    })
+
     /**
      * 点击查询 费用
      */
     const queryXiangMu = () => {
       queryFeiYong()
     }
+
+    /**
+     * 刷新费用信息
+     */
+    const shuaXinFeiYong = () => {
+      let query = {
+        inpatientNo: patient.value.inpatientNo,
+        admissTimes: patient.value.admissTimes,
+      }
+      getHuanZheFeiYong(query).then((res) => {
+        tableDataHuanZheFeiYong.value = res
+        cptTableDataHuanZheFeiYong.value = res
+        patient.value.total = cptTableDataHuanZheFeiYong.value.length
+        tuiFeiZhuangTaiChaKan(patient.value.tuiFeiFlag)
+      })
+    }
     /**
      * 分页
      */
@@ -628,9 +706,44 @@ export default {
 
     /** 关闭 对话框 */
     const guanBiDialog = () => {
-      store.commit('SET_XMLR', false)
+      ctx.emit('close-xmlr')
     }
 
+    watch(
+      () => props.init,
+      () => {
+        if (!baseinfo().inpatientNo) {
+          jinRuPanDuanSFXieDaiHuanZheXinXi()
+        } else {
+          patient.value = clone(baseinfo())
+          patient.value.currentPage = 1
+          patient.value.pageSize = 40
+          patient.value.total = 0
+          patient.value.tuiFeiFlag = 0
+          patient.value.orderNo = 0
+          patient.value.deptCode = Cookie.get('dept')
+          panDuanSFTongGuoBingShiJinRu.value = true
+          queryFeiYong()
+        }
+      }
+    )
+
+    onMounted(() => {
+      if (!baseinfo().inpatientNo) {
+        jinRuPanDuanSFXieDaiHuanZheXinXi()
+      } else {
+        patient.value = clone(baseinfo())
+        patient.value.currentPage = 1
+        patient.value.pageSize = 40
+        patient.value.total = 0
+        patient.value.tuiFeiFlag = 0
+        patient.value.orderNo = 0
+        patient.value.deptCode = Cookie.get('dept')
+        panDuanSFTongGuoBingShiJinRu.value = true
+        queryFeiYong()
+      }
+    })
+
     return {
       patient,
       cptSex,
@@ -674,6 +787,11 @@ export default {
       guanBiDialog,
       danGeXiangMuCurrentPage,
       danGeXiangMuCurrentChange,
+      inpatientNo,
+      chaXunHuanZheXinXi,
+      shuaXinFeiYong,
+      panDuanSFTongGuoBingShiJinRu,
+      queryFeiYong,
     }
   },
 }

src/views/medical-insurance/inpatient/AdmRegistration.vue

@@ -16,6 +16,7 @@
       <el-button style="margin-left: 10px" size="mini" type="success" icon="el-icon-top" @click="beforeYbRegister(1)">医保入院登记 </el-button>
       <el-button size="mini" type="success" icon="el-icon-bottom" @click="beforeCancelRegister">取消入院登记</el-button>
       <el-button type="warning" size="mini" icon="el-icon-edit" @click="beforeYbRegister(2)">入院信息变更</el-button>
+      <el-button size="mini" type="success" icon="el-icon-s-claim" @click="xiangMuLuRuRouter">项目录入</el-button>
     </el-header>
     <el-main>
       <div>
@@ -197,6 +198,9 @@
         </el-dialog>
       </div>
     </el-main>
+    <el-dialog v-model="openXmlr" title="项目录入" :fullscreen="true" @close="closeXiangMuLuRuDialog">
+      <Xmlr :init="initProp" @closeXmlr="openXmlr = false" />
+    </el-dialog>
   </el-container>
 </template>
 
@@ -218,7 +222,11 @@ import { getGreatestRole } from '@/utils/permission'
 import { clone } from '@/utils/clone'
 import { getDiagTypes, getMedTypesByFlag } from '@/api/medical-insurance/si-dict'
 import { baseinfo } from '@/data/inpatient'
+import Xmlr from '@/views/hospitalization/XiangMuLuRu.vue'
 export default {
+  components: {
+    Xmlr,
+  },
   setup() {
     const isAdmin = getGreatestRole() < 10
     const patient = computed(() => {
@@ -547,6 +555,17 @@ export default {
       })
     })
 
+    // 项目录入
+    const openXmlr = ref(false)
+    const initProp = ref(0)
+    const xiangMuLuRuRouter = () => {
+      initProp.value += 1
+      openXmlr.value = true
+    }
+    const closeXiangMuLuRuDialog = () => {
+      router.push('/admiss')
+    }
+
     return {
       isAdmin,
       patient,
@@ -560,6 +579,8 @@ export default {
       showSearchDiag,
       diagItem,
       cptSex,
+      openXmlr,
+      initProp,
       openDiagDialog,
       fetchZyYbDiags,
       deleteYbDiag,
@@ -577,6 +598,8 @@ export default {
       doYbRegisterOrModify,
       beforeCancelRegister,
       formatYbRegisterDate,
+      xiangMuLuRuRouter,
+      closeXiangMuLuRuDialog,
     }
   },
 }

src/views/medical-insurance/inpatient/InHospFeeUpload.vue

@@ -4,7 +4,6 @@
       <el-button size="mini" icon="el-icon-thumb" type="success" @click="preCalculateCost">获取费用</el-button>
       <el-button size="mini" icon="el-icon-upload2" type="success" @click="uploadFees">费用上传</el-button>
       <el-button size="mini" icon="el-icon-remove-outline" type="warning" :disabled="!isAdmin" @click="cancelFees">取消上传</el-button>
-      <el-button size="mini" type="success" icon="el-icon-s-claim" @click="xiangMuLuRuRouter">项目录入</el-button>
       <el-button size="mini" type="success" icon="el-icon-refresh" @click="tuiFeiPiPeiClick">医嘱退费匹配</el-button>
       <el-popover placement="left" width="730" trigger="click">
         <template #reference>
@@ -97,9 +96,6 @@
           </div>
         </div>
       </div>
-      <el-dialog v-model="xiangMuLuRuDialog" title="项目录入" :fullscreen="true" @close="closeXiangMuLuRuDialog">
-        <router-view />
-      </el-dialog>
     </el-main>
   </el-container>
 </template>
@@ -115,12 +111,13 @@ import { proofread, multipleUpload } from '@/api/yibao/yibao'
 import { hospitalizationPreSettlement, uploadFeeDetail, revokeUploadFees } from '@/api/medical-insurance/si-inpatient'
 import { setCallback } from '@/utils/websocket'
 import { getGreatestRole } from '@/utils/permission'
+import { baseinfo } from '@/data/patient'
 import router from '@/router'
 export default {
   setup() {
     const isAdmin = getGreatestRole() < 10
     const patient = computed(() => {
-      return store.state.ptnt.baseinfo
+      return baseinfo()
     })
     const fees = initFees()
     const page = initPage()
@@ -364,28 +361,7 @@ export default {
         .catch(() => {})
     }
 
-    const xiangMuLuRuDialog = computed(() => {
-      return store.state.xiangMuLuRuDialog
-    })
-
-    const xiangMuLuRuRouter = () => {
-      if (nullPatient()) return
-      store.commit('SET_XMLR', true)
-      router.push('/xmlr')
-    }
-
-    const closeXiangMuLuRuDialog = () => {
-      router.push('/inHospFeeUpload')
-    }
-
     const tuiFeiPiPeiClick = () => {
-      if (nullPatient()) return
-      if (Cookies.get('dept') !== '3100000') {
-        ElMessage.error({
-          message: '该功能正在开发中',
-        })
-        return
-      }
       yiZhuTuiFeiPiPei(patient.value.inpatientNo, patient.value.admissTimes)
     }
 
@@ -419,9 +395,6 @@ export default {
       patientIndex,
       uploadIndexText,
       cancelFees,
-      xiangMuLuRuDialog,
-      xiangMuLuRuRouter,
-      closeXiangMuLuRuDialog,
       tuiFeiPiPeiClick,
     }
   },

src/views/reports/JiMuBaoBiao.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-container style="margin-top: 10px">
+    <el-header>
+      <el-date-picker
+        type="daterange"
+        size="mini"
+        v-model="zhuYuanShiJianChaoTime"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :shortcuts="shortcuts"
+      ></el-date-picker>
+      <el-button size="mini" type="primary" style="margin-left: 10px" @click="query">查询</el-button>
+    </el-header>
+    <el-container>
+      <el-main>
+        <el-row>
+          <el-col :span="12">
+            <div style="width: 100%; height: 300px" id="huanZheChao30"></div>
+          </el-col>
+          <el-col :span="12">
+            <div style="width: 100%; height: 300px" id="pingJunZhuYuan"></div>
+          </el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue'
+import { zhuYuanShiJianChao } from '@/api/querydata/jimubaobiao'
+import { getDateRangeFormatDate } from '@/utils/date'
+import { pieUtils } from '@/utils/echarts-utils'
+import { shortcuts } from '@/data/shortcuts'
+export default {
+  setup() {
+    // 引入
+
+    // 住院时间超过
+    const zhuYuanShiJianChaoTime = ref([])
+
+    zhuYuanShiJianChaoTime.value[0] = '2020-01-01'
+    zhuYuanShiJianChaoTime.value[1] = '2021-11-01'
+
+    const query = () => {
+      let daterange = getDateRangeFormatDate(zhuYuanShiJianChaoTime.value)
+      let startTime = daterange.stratTime
+      let endTime = daterange.endTime
+      zhuYuanShiJianChao(startTime, endTime).then((res) => {
+        pieUtils(huanZheChao30, '住院时间超30日患者例数', res.huanZheChao30)
+        pieUtils(pingJunZhuYuan, '住院患者平均住院日', res.pingJunZhuYuan)
+      })
+    }
+
+    onMounted(() => {
+      setTimeout(() => {
+        query()
+      }, 100)
+    })
+
+    return {
+      zhuYuanShiJianChaoTime,
+      query,
+      shortcuts,
+    }
+  },
+}
+</script>
+
+<style></style>

src/views/reports/QueryPayService.vue

@@ -67,7 +67,7 @@ import yuanNeiTongJiCKXQ from './YuanNeiTongJiCKXQ.vue'
 export default {
   components: { yuanNeiTongJiCKXQ },
   setup() {
-    const windowSize = store.state.app.windowSize
+    const windowSize = store.state.windowSize
     const tableHeight = windowSize.h - 120
 
     const start = formatDate(clockinShortcuts[1].value[0])
@@ -134,7 +134,7 @@ export default {
     const pageSize = ref(30)
 
     const exportExcel = () => {
-      store.commit('app/setLoading', true)
+      store.commit('SET_LOADING', true)
       setTimeout(() => {
         const title = {
           chargeCode: '收费编码',
@@ -156,6 +156,7 @@ export default {
     const chaKanXiangQingClick = (val) => {
       val.startTime = queryTerm.startTime
       val.endTime = queryTerm.endTime
+      val.dept = queryTerm.ward
       chaKanXiangQing(val).then((res) => {
         store.commit('SET_YNTJ', res)
         bianMaXiangQingDialog.value = true

src/views/reports/YuanNeiTongJiCKXQ.vue

@@ -1,27 +1,26 @@
 <template>
-  <div>
-    <el-table :data="store.state.yuanNeiTongJi.slice((1 - 1) * 50, 1 * 50)" size="mini" :height="tableHeight - 200" stripe highlight-current-row>
-      <el-table-column label="住院/门诊号" prop="patient"></el-table-column>
-      <el-table-column label="住院/门诊次数" prop="times"></el-table-column>
-      <el-table-column label="患者姓名" prop="name"></el-table-column>
-      <el-table-column label="身份证" prop="socialNo"></el-table-column>
-      <el-table-column label="手机号" prop="phone"></el-table-column>
-      <el-table-column label="入院日期" prop="admissDate" width="80px"></el-table-column>
-      <el-table-column label="出院日期" prop="disDate" width="80px"></el-table-column>
-      <el-table-column label="收费日期" prop="chargeDate" width="80px"></el-table-column>
-      <el-table-column label="科室" prop="dept"></el-table-column>
-      <el-table-column label="医保类型" prop="ybType"></el-table-column>
-      <el-table-column label="数量" prop="number"></el-table-column>
-      <el-table-column label="主要诊断" prop="mainDiagnosis"></el-table-column>
-      <el-table-column label="次要诊断" prop="disDiagComment"></el-table-column>
-      <el-table-column label="金额" prop="amountOfMoney"></el-table-column>
-      <el-table-column label="项目编码" prop="chargeCode"></el-table-column>
-      <el-table-column label="来源" prop="source"></el-table-column>
-    </el-table>
-    <el-tag>共{{ store.state.yuanNeiTongJi.length }}条</el-tag>
-    <el-tag type="warning">默认显示前50条</el-tag>
-    <el-button size="mini" type="primary" icon="el-icon-download" @click="yaoPinShiYongDaoChuClick">导出 excel</el-button>
-  </div>
+  <el-table :data="store.state.yuanNeiTongJi.slice((1 - 1) * 50, 1 * 50)" size="mini" :height="tableHeight - 200" stripe highlight-current-row>
+    <el-table-column label="住院/门诊号" prop="patient"></el-table-column>
+    <el-table-column label="住院/门诊次数" prop="times"></el-table-column>
+    <el-table-column label="患者姓名" prop="name"></el-table-column>
+    <el-table-column label="身份证" prop="socialNo"></el-table-column>
+    <el-table-column label="手机号" prop="phone"></el-table-column>
+    <el-table-column label="入院日期" prop="admissDate" width="80px"></el-table-column>
+    <el-table-column label="出院日期" prop="disDate" width="80px"></el-table-column>
+    <el-table-column label="收费日期" prop="chargeDate" width="80px"></el-table-column>
+    <el-table-column label="申请科室" prop="dept"></el-table-column>
+    <el-table-column label="执行科室" prop="execUnit"></el-table-column>
+    <el-table-column label="医保类型" prop="ybType"></el-table-column>
+    <el-table-column label="数量" prop="number"></el-table-column>
+    <el-table-column label="主要诊断" prop="mainDiagnosis"></el-table-column>
+    <el-table-column label="次要诊断" prop="disDiagComment"></el-table-column>
+    <el-table-column label="金额" prop="amountOfMoney"></el-table-column>
+    <el-table-column label="项目编码" prop="chargeCode"></el-table-column>
+    <el-table-column label="来源" prop="source"></el-table-column>
+  </el-table>
+  <el-tag>共{{ store.state.yuanNeiTongJi.length }}条</el-tag>
+  <el-tag type="warning">默认显示前50条</el-tag>
+  <el-button size="mini" type="primary" icon="el-icon-download" @click="yaoPinShiYongDaoChuClick">导出 excel</el-button>
 </template>
 
 <script>
@@ -31,7 +30,7 @@ import { writeExcelFile, createWorkSheet } from '@/utils/excel'
 
 export default {
   setup() {
-    const windowSize = store.state.app.windowSize
+    const windowSize = store.state.windowSize
     const tableHeight = windowSize.h - 120
 
     /** 导出excel 表 */
@@ -49,7 +48,7 @@ export default {
         inputErrorMessage: '文件名不能为空 (∩•̀ω•́)⊃-*⋆',
       })
         .then(({ value }) => {
-          store.commit('app/setLoading', true)
+          store.commit('SET_LOADING', true)
           setTimeout(() => {
             const title = {
               patient: '住院/门诊号',
@@ -60,7 +59,8 @@ export default {
               admissDate: '入院日期',
               disDate: '出院日期',
               chargeDate: '收费日期',
-              dept: '科室',
+              dept: '申请科室',
+              execUnit: '执行科室',
               number: '数量',
               mainDiagnosis: '主要诊断',
               disDiagComment: '次要诊断',
@@ -79,6 +79,7 @@ export default {
               'disDate',
               'chargeDate',
               'dept',
+              'execUnit',
               'number',
               'mainDiagnosis',
               'disDiagComment',