1

huangxiaoqiang

2025-01-11 8682c853ec917aba0daa696c377b99add1c0f080

 Code Management/WMS/WIDESEA_WMSClient/src/views/home/home-chart-options.js

@@ -1,248 +1,247 @@
var chart1 = {
    title: {
        text: "框架集成及开发环境",
        left: 'center',
        padding: 15,
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: 'bottom',
        icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        itemWidth: 10,  // 设置宽度
        itemHeight: 10, // 设置高度
        itemGap: 7,// 设置间距
        padding: [0, 0, 15, 0] //图例距离
    },
    series: [
        {
            name: '框架',
            type: 'pie',
            radius: ['40%', '65%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '.NetCore' },
                { value: 735, name: 'Dapper' },
             
                { value: 735, name: 'EntityFramework' },
                // { value: 735, name: 'JWT' },
                { value: 735, name: 'Redis' },
                { value: 735, name: 'Vue3.0' },
                { value: 580, name: 'Vuex' },
                { value: 484, name: 'Element plus' }
            ]
  title: {
    text: '框架集成及开发环境',
    left: 'center',
    padding: 15
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: 'bottom',
    icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
    itemWidth: 10, // 设置宽度
    itemHeight: 10, // 设置高度
    itemGap: 7, // 设置间距
    padding: [0, 0, 15, 0] //图例距离
  },
  series: [
    {
      name: '框架',
      type: 'pie',
      radius: ['40%', '65%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
    ]
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '.NetCore' },
        { value: 735, name: 'Dapper' },

        { value: 735, name: 'EntityFramework' },
        // { value: 735, name: 'JWT' },
        { value: 735, name: 'Redis' },
        { value: 735, name: 'Vue3.0' },
        { value: 580, name: 'Vuex' },
        { value: 484, name: 'Element plus' }
      ]
    }
  ]
}

var chart2 = {
    title: {
        text: '这里是首页'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  title: {
    text: '这里是首页'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['2.0下载量', '3.0下载量'],
    padding: [0, 0, 15, 0] //图例距离
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '2.0下载量',
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
        normal: {
          barBorderRadius: [4, 4, 0, 0]
        }
      },
      data: [730, 620, 420, 932, 701, 834, 890]
    },
    legend: {
        data: ['2.0下载量', '3.0下载量'],
        padding: [0, 0, 15, 0] //图例距离
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top:'13%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [ '2015', '2016', '2017', '2018', '2019', '2020', '2021']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '2.0下载量',
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
    {
      name: '3.0下载量',
      type: 'bar',

                normal: {
                    barBorderRadius: [4, 4, 0, 0]
                }
            },
            data: [ 730, 620, 420, 932, 701, 834, 890]
        },
        {
            name: '3.0下载量',
            type: 'bar',

            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            data: [230, 210, 120, 132, 101, 134, 90]
        }
    ]
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      data: [230, 210, 120, 132, 101, 134, 90]
    }
  ]
}
var chart3 = {
    title: {
        text: '框架支持功能(Vue2.0、Vue3.0版本)',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: 'bottom',
        icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        itemWidth: 10,  // 设置宽度
        itemHeight: 10, // 设置高度
        itemGap: 7,// 设置间距
        padding: [0, 0, 10, 0] //图例距离
    },
    series: [
        {

            name: '框架支持功能(Vue2.0、Vue3版本)',
            type: 'pie',
            radius: '55%',
            data: [
                { value: 748, name: '多租户' },
                { value: 435, name: '多角色' },
                { value: 580, name: '多数据库' },
                { value: 280, name: '主从分库' },
                { value: 284, name: '国际化' },
                { value: 300, name: 'App/H5开发' },
                { value: 200, name: 'Redis' },
                { value: 600, name: 'Sqlserver' },
                { value: 400, name: 'Mysql' },
                { value: 100, name: 'Oracle' },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
  title: {
    text: '框架支持功能(Vue2.0、Vue3.0版本)',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: 'bottom',
    icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
    itemWidth: 10, // 设置宽度
    itemHeight: 10, // 设置高度
    itemGap: 7, // 设置间距
    padding: [0, 0, 10, 0] //图例距离
  },
  series: [
    {
      name: '框架支持功能(Vue2.0、Vue3版本)',
      type: 'pie',
      radius: '55%',
      data: [
        { value: 748, name: '多租户' },
        { value: 435, name: '多角色' },
        { value: 580, name: '多数据库' },
        { value: 280, name: '主从分库' },
        { value: 284, name: '国际化' },
        { value: 300, name: 'App/H5开发' },
        { value: 200, name: 'Redis' },
        { value: 600, name: 'Sqlserver' },
        { value: 400, name: 'Mysql' },
        { value: 100, name: 'Oracle' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    ]
      }
    }
  ]
}
var chart4={
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top:'13%',
        containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
      {
        name: 'Direct',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334, 390, 330, 320]
var chart4 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      {
        name: 'Mail Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      emphasis: {
        focus: 'series'
      },
      {
        name: 'Affiliate Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      {
        name: 'Video Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [150, 212, 201, 154, 190, 330, 410]
      emphasis: {
        focus: 'series'
      },
      {
        name: 'Search Engine',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  }
export { chart1, chart2, chart3,chart4 }
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
}
export { chart1, chart2, chart3, chart4 }