导入Echarts

• • 社区的统计页面是用百度的Echarts写的
• • 首先需要引入echarts.js

<script src="/static/js/echarts.js"></script>

4个仪表盘

• 
• • 首先是统计上线天数，社区成员，总访问量，总博客数的仪表盘图形
• • 现在HTML写上要放置的图形位置

• <div class="ta-static-card-allDays" id="ta-static-block-allDays"></div>
  <div class="ta-static-card-allMembers" id="ta-static-block-allMembers"></div>
  <div class="ta-static-card-allViews" id="ta-static-block-allViews"></div>
  <div class="ta-static-card-allBlogs" id="ta-static-block-allBlogs"></div>

• • 这里4个class的名字虽然不一样，但是他们的样式是一样的，取不同的名字本来我是打算弄四个不一样的大小的统计图形，后来又改成一样了
• • 如果是这样的话我们不需要写4个css样式，可以直接这样写，选择class里面包括'ta-static-card-'的就可以了

  [class^=ta-static-card-] {
      width: 100%;
      height: 200px;
      background-color: #ffffff;
  }

• • 之后在js写（这里就拿上线天数为例，其他的3个就改一下颜色和data就可以了），备注都写好了
• • 注意数据要自己从数据库拿，然后用变量代替数字就可以了

• let myChart_allDays = echarts.init(document.getElementById('ta-static-block-allDays'));
  
  myChart_allDays.setOption({
      series: [{
          // 保证刻度线指向中间
          max: 452 * 2,
          // 表示是仪表盘类型
          type: 'gauge',
          // 图形的位置
          center: ['50%', '55%'],
          // 外面弧形的大小
          radius: '85%',
          // 外面弧形里面的进度条的样式
          progress: {
              show: true,
              width: 10
          },
          // 外面弧形的样式
          axisLine: {
              lineStyle: {
                  width: 10
              }
          },
          // 外面弧形的小刻度线
          axisTick: {
              show: false
          },
          // 外面弧形的大刻度线
          splitLine: {
              show: false,
          },
          // 外面弧形的大刻度线的数字
          axisLabel: {
              show: false,
          },
          // 标题的样式，也就是上线天数
          title: {
              show: true,
              color: '#5470c6',
              fontSize: 14,
              fontWeight: 700,
              offsetCenter: [0, '40%']
          },
          // 详细的样式，也就是上线天数数字的样式
          detail: {
              valueAnimation: true,
              color: '#5470c6',
              fontSize: 20,
              offsetCenter: [0, '70%']
          },
          // 进度条和刻度线指针的颜色
          itemStyle: {
              color: '#5470c6',
          },
          // 数据
          data: [{
              value: 452,
              name: '上线天数',
          }]
      }]
  })
  
  // 使用刚指定的配置项和数据显示图表。
  window.onresize = function () {
      myChart_allDays.resize();
  }

博客访问量统计

• 
• • JS的代码

• let myChart_processBlock = echarts.init(document.getElementById('ta-static-processBlock'));
  
  myChart_processBlock.setOption({
      // 标题
      title: {
          top: '3%',
          text: '博客访问量统计'
      },
      // 标签，点击可以隐藏显示的
      legend: {
          show: false
      },
      // 是否出现提示框
      tooltip: {
          trigger: 'item'
      },
      // 右上角工具栏
      toolbox: {
          top: '2%',
          feature: {
              saveAsImage: {
                  title: '保存'
              }
          },
          iconStyle: {
              emphasis: {
                  borderColor: '#393939',
              },
          },
      },
      series: [{
          name: '访问排行',
          type: 'pie',
          radius: [0, 150],
          center: ['50%', '50%'],
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
      }]
  });
  
  // 使用刚指定的配置项和数据显示图表。
  window.onresize = function () {
      myChart_processBlock.resize();
  }

博客系列访问量统计

• 

• let myChart_blogBlock = echarts.init(document.getElementById('ta-static-blogBlock'));
  
  myChart_blogBlock.setOption({
      // 标题
      title: {
          top: '3%',
          text: '博客系列访问量统计'
      },
      // 图表位置
      grid:{
          left: '7%',
          right: '5%',
          bottom: '10%',
      },
      // 提示框
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
          }
      },
      // 右上角的工具栏
      toolbox: {
          top: '3%',
          feature: {
              magicType: {
                show: true,
                title: ['折线图模式', '柱状图模式'],
                type: ['line', 'bar']
              },
              restore: {
                show: true,
                title: '重新加载'
              },
              saveAsImage: {
                show: true,
                title: '保存'
              }
          },
          iconStyle: {
              emphasis: {
                  borderColor: '#393939',
              },
          },
      },
      // 上方的标签，点击可以隐藏显示
      legend: {
          show: true,
          top: "5%",
          data: ['访问量', '预期未来访问量', '博客数']
      },
      xAxis: [{
          type: 'category',
          data: ['前端面试题', 'JavaScript', 'Bootstrap', 'Django', '社区各功能的实现', '网站开发遇到的坑', 'Vue', '互通四区-暴雪帝国'],
          axisPointer: {
              type: 'shadow'
          },
          axisTick: {
              show: false,
          },
          axisLabel: {
              show: axisLabelShow,
              interval: 0
          }
      }],
      yAxis: [{
          type: 'value',
          min: 0,
          axisLabel: {
              formatter: '{value}'
          }
      }, {
          type: 'value',
          min: 0,
          axisLabel: {
              formatter: '{value}'
          }
      }],
      series: [{
          name: '访问量',
          type: 'bar',
          barMinHeight: 10,
          data: [1, 3, 3, 3, 3, 6, 9, 7304]
      }, {
          name: '预期未来访问量',
          type: 'bar',
          barMinHeight: 10,
          data: [1, 5, 3, 4, 4, 10, 17, 14038]
      }, {
          name: '博客数',
          type: 'line',
          yAxisIndex: 1,
          data: [1, 1, 1, 1, 1, 1, 3, 14]
      }]
  });
  
  // 使用刚指定的配置项和数据显示图表。
  window.onresize = function () {
      myChart_blogBlock.resize();
  }