echarts學習筆記

1、line折線圖

效果圖

setPieCharts (id, name, xName, yName, x, y, data) {
      let $echartsDOM = document.getElementById(id)
      let myEcharts = echarts.init($echartsDOM)
      let option = {
        title: {
          text: name,
          left: '9.1%'
        },
        xAxis: {
          type: 'category',
          data: x,
          show: true, // 是否顯示座標軸
          axisTick: { // x軸刻度
            show: false
          },
          axisLine: { // 線配置
            show: true,
            lineStyle: {
              color: '#d8d8da'
            }
          },
          axisLabel: { // 標識樣式
            color: '#333'
          },
          name: '('+ xName +')', // 配置x軸name
          nameLocation: 'end',
          nameTextStyle: {
            fontFamily: 'PingFangSC-Regular',
            color: '#C4CDD8',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          data: y,
          name: '('+ yName +')', // name相關配置
          nameLocation: 'end',
          nameTextStyle: {
            fontFamily: 'PingFangSC-Regular',
            color: '#C4CDD8',
            fontSize: 12
          },
          axisLine: { // 線配置
            show: true,
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: { // 標識樣式
            color: '#333'
          },
        },
        series: [{
          data: data,
          type: 'line',
          symbolSize: 6, // 標記大小
          color: '#7EB0E9',
          lineStyle: {
              color: '#7EB0E9'
          },
          label: {
            show: true,
            backgroundColor: '#4381E4',
            position: 'top',
            width: '200',
            padding: [5,15,5,15],
            width: 80,
            height: 40
            /* backgroundColor: {
              image: 'images/[email protected]'   
            }*/              
          }
        }]
      }
      myEcharts.setOption(option)
      //window.addEventListener('resize', myEcharts.resize())
    }

模擬數據

lineData: [
        {
          'subject': '數學成績',
          'id': 'math',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['50', '60', '55', '80', '92', '13', '34', '12', '30', '89']
        },
        {
          'subject': '數學班級排名',
          'id': 'chinese',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['30', '40', '25', '80', '92', '73', '34', '52', '30', '89']
        },
        {
          'subject': '語文成績',
          'id': 'math1',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['50', '60', '55', '80', '92', '13', '34', '12', '30', '89']
        },
        {
          'subject': '語文班級排名',
          'id': 'chinese1',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['30', '40', '25', '80', '92', '73', '34', '52', '30', '89']
        }
      ]

初始化

mounted () {
    this.lineData.map((v, index) => {
      this.setPieCharts(v.id, v.subject, v.xName, v.yName, v.x, v.y, v.data)
    })
  }

2、圓環佔比圖

效果圖

option配置

setPieCharts (id) {
      let $echartsDOM = document.getElementById(id)
      let myEcharts = echarts.init($echartsDOM)
      let num = 180
      let option = {
        series: [{
          type: 'pie',  // 圖類型
          radius: ['50%', '35%'], // 設置半徑，外佔比，內佔比
          data: [
            {
              value: 80,
              name: '未讀', // 圖名稱
              type: 'pie',  // 圖類型
              label: {
                normal: { // label標準
                  position: 'center', //文字位置
                  formatter: '{one|{b}} {two|{c}}\n{br|}',
                  //lineHeight: 25,
                  rich: {
                    one: {
                      color: '#87CEFA',
                      fontSize: 10,
                      lineHeight: 14,
                      verticalAlign: 'middle'
                    },
                    two: {
                      color: '#87CEFA',
                      fontSize: 18,
                      lineHeight: 25,
                      verticalAlign: 'top'
                    },
                    br: {
                      height: 2,
                      borderWdth: 35,
                      width: '100%'
                    }
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: '#87CEFA'
                }
              }
            },
            {
              value: 100,
              name: '文檔', // 圖名稱
              label: {
                normal: { // label標準
                  position: 'center', //文字位置
                  formatter: '{hr|}\n{two|' + num + '}\n{one|{b}}',
                  rich: { // formatter樣式配置
                    one: { // 樣式名
                      color: '#4C8AFE',
                      fontSize: 12
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5,
                      align: '',
                      height: 0
                    },
                    two: {
                      color: '#ADADBD',
                      fontSize: 10
                    }
                  }
                }
              },
              itemStyle: { // 顏色
                normal: {
                  color: '#4C8AFE'
                }
              }
            }
          ]
        }]
      }
      myEcharts.setOption(option)
      // window.addEventListener('resize', myEcharts.resize())
    }

3、圓環圖

效果圖

option配置

setPieCharts (id, legData, data) {
      let $echartsDOM = document.getElementById(id)
      let myEcharts = echarts.init($echartsDOM)
      let option = {
        legend: {
          orient: 'vertical',
          x: 'right', // 說明列表位置配置
          y: 'middle',
          align: 'left', // 右側圖例位置
          padding: [0, 50, 0, 0], // 邊距位置
          data: legData
        },
        series: [
          {
            center: ['40%', '50%'], // 圖形位置配置
            name: '圓環圖',
            type: 'pie',
            radius: ['80%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'left'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: data
          }
        ]
      }
      myEcharts.setOption(option)
      window.addEventListener('resize', myEcharts.resize())
    }

模擬數據

dountChart: [
        {
          'name': '線上線下用時對比',
          'pieData': [
            {value: 80, name: '語文班課:80小時'},
            {value: 40, name: '語文在線:40小時'},
            {value: 60, name: '數學在線:60小時'}
          ]
        },
        {
          'name': '科目學習用時對比',
          'pieData': [
            {value: 30, name: '語文班課:30小時'},
            {value: 20, name: '語文在線:20小時'},
            {value: 30, name: '數學在線:30小時'},
            {value: 40, name: '英語個性化:40小時'},
            {value: 60, name: '英語在線:60小時'}
          ]
        }
      ]

初始化

mounted () {
    this.dountChart.map((val, index) => {
      var legData = []
      val.pieData.map((v, i) => {
        legData.push(v.name)
      })
      this.setPieCharts(index, legData, val.pieData)
    })
  }