ECharts之折線圖

效果圖

背景圖片

下載ECharts

npm install echarts --save

引入並註冊全局ECharts

    在 main.js 文件裏引入並註冊 ( 這裏是 Vue3.0 的模板 )

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在組件中使用ECharts

<template>
  <div class='wrapper'>
    <div class='chart' id='chart'></div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基於準備好的dom，初始化echarts實例
      let chart = this.$echarts.init(document.getElementById('chart'))
      // 監聽屏幕變化自動縮放圖表
      window.addEventListener('resize', function () { chart.resize() })
      chart.setOption({
        // 設置圖表的位置
        grid: {
          x: 60, // 左間距
          y: 60, // 上間距
          x2: 30, // 右間距
          y2: 40, // 下間距
          containLabel: true // grid 區域是否包含座標軸的刻度標籤, 常用於『防止標籤溢出』的場景
        },
        // dataZoom 組件 用於區域縮放
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0], // 設置 dataZoom-inside 組件控制的 x 軸
            // 數據窗口範圍的起始和結束百分比  範圍: 0 ~ 100
            start: 0,
            end: 80
          }
        ],
        // 圖表主標題
        title: {
          text: '地區銷售率', // 主標題文本，支持使用 \n 換行
          top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具體的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          textStyle: { // 文本樣式
            fontSize: 24,
            fontWeight: 600,
            color: '#fff'
          }
        },
        // 提示框組件
        tooltip: {
          trigger: 'axis', // 觸發類型, axis: 座標軸觸發
          axisPointer: {
            type: 'line' // 指示器類型
          },
          textStyle: {
            color: '#d5dbff' // 文字顏色
          },
          // 提示框浮層內容格式器，支持字符串模板和回調函數兩種形式
          // 折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
          formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
        },
        // 圖例組件
        legend: {
          // 圖例的數據數組
          data: [
            {
              name: '年銷售率' // 圖例項的名稱 與 series 裏的 name 相對應
            },
            {
              name: '季度銷售率'
            }
          ],
          top: 13, // 定位
          right: 10,
          textStyle: { // 文本樣式
            fontSize: 16,
            color: '#d5dbff'
          }
        },
        // X軸
        xAxis: [
          {
            show: true, // 不設置默認值爲 true
            // 座標軸類型,  'category' 類目軸，適用於離散的類目數據，爲該類型時必須通過 data 設置類目數據
            type: 'category',
            // 座標軸軸線
            axisLine: {
              show: true, // 是否顯示座標軸軸線 默認顯示
              lineStyle: {
                type: 'solid', // 座標軸線線的類型 'solid', 'dashed', 'dotted'
                width: 1, // 座標軸線線寬, 不設置默認值爲 1
                color: '#565e8f' // 座標軸線線的顏色
              }
            },
            // 分隔線
            splitLine: {
              show: false
            },
            // 座標軸刻度
            axisTick: {
              show: false
            },
            // 座標軸刻度標籤
            axisLabel: {
              show: true, // 是否顯示刻度標籤 默認顯示
              color: '#d5dbff', // 刻度標籤文字的顏色
              fontSize: 12, // 文字的字體大小
              rotate: 30, // 刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。
              margin: 10, // 刻度標籤與軸線之間的距離 默認值 8
              // 使用字符串模板，模板變量爲刻度默認標籤 {value}
              formatter: '{value}'
            },
            // 類目名稱
            data: ['北京', '上海', '廣州', '深圳', '杭州', '成都', '廈門', '武漢', '鄭州', '長沙', '哈爾濱', '瀋陽']
          }
        ],
        yAxis: [
          // 左側Y軸
          {
            type: 'value', // 座標軸類型,   'value' 數值軸，適用於連續數據
            // 座標軸在圖表區域中的分隔線
            splitLine: {
              show: true, // 是否顯示分隔線 默認數值軸顯示
              lineStyle: { // 分隔線顏色，可以設置成單個顏色。
                color: '#565e8f'
              }
            },
            // 座標軸刻度
            axisTick: {
              show: false // 是否顯示座標軸刻度 默認顯示
            },
            // 座標軸軸線。
            axisLine: {
              show: true, // 是否顯示座標軸軸線 默認顯示
              lineStyle: {
                color: '#565e8f' // 座標軸線線的顏色
              }
            },
            axisLabel: {
              show: true, // 是否顯示刻度標籤 默認顯示
              color: '#d5dbff', // 刻度標籤文字的顏色
              // 使用字符串模板，模板變量爲刻度默認標籤 {value}
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            type: 'line', // 系列類型
            name: '年銷售率', // 系列名稱, 用於tooltip的顯示, legend 的圖例篩選
            // 數據堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加
            stack: '銷售率',
            symbol: 'circle', // 標記的圖形
            symbolSize: 8, // 標記的大小
            // 圖形的樣式
            itemStyle: {
              color: '#2774e0'
            },
            // 線的樣式, 修改 lineStyle 中的顏色不會影響圖例顏色, 一般不設置線的樣式
            lineStyle: {
              type: 'solid', // 線的類型 'solid', 'dashed', 'dotted'
              color: '#2774e0'
            },
            // 區域填充樣式
            areaStyle: {
              color: { // 填充的顏色
                type: 'linear', // linear 線性漸變  radial 徑向漸變
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2774e0' // 0% 處的顏色
                }, {
                  offset: 1,
                  color: '#2774e0' // 100% 處的顏色
                }]
              }
            },
            // 系列中的數據內容數組
            data: [20, 24, 33, 45, 63, 50, 42, 24, 23, 14, 40, 52]
          },
          {
            type: 'line', // 系列類型
            name: '季度銷售率', // 系列名稱, 用於tooltip的顯示, legend 的圖例篩選
            // 數據堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加
            stack: '銷售率',
            symbol: 'circle', // 標記的圖形
            symbolSize: 8, // 標記的大小
            // 圖形的樣式
            itemStyle: {
              color: '#08b4fc'
            },
            // 線的樣式, 修改 lineStyle 中的顏色不會影響圖例顏色, 一般不設置線的樣式
            lineStyle: {
              type: 'solid', // 線的類型 'solid', 'dashed', 'dotted'
              color: '#08b4fc'
            },
            // 區域填充樣式
            areaStyle: {
              color: { // 填充的顏色
                type: 'linear', // linear 線性漸變  radial 徑向漸變
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#08b4fc' // 0% 處的顏色
                }, {
                  offset: 1,
                  color: '#08b4fc' // 100% 處的顏色
                }]
              }
            },
            // 系列中的數據內容數組
            data: [40, 49, 57, 70, 90, 75, 55, 72, 42, 34, 55, 70]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
}
.wrapper .chart {
  width: 60%;
  height: 400px;
  margin: 100px 50px 0;
  border: 1px solid #eeeeee;
  background: url(../../public/static/bg.png) no-repeat;
  background-size: 100% 100%;
}
</style>