echarts的一點記錄

echart官網地址： https://www.echartsjs.com/index.html

echarts實例地址： https://echarts.baidu.com/examples/

vue-cli對echart的引用

安裝echarts依賴 npm install echarts -S

方式一：全局引入

main.js

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

vue組件

<template>
<div>
  <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>

<script>
export default {
  name: 'myecharts2',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基於準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 繪製圖表
      myChart.setOption({
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>

echarts全局引用

 

方式二：按需引入

全局引入會將全部的echarts圖標打包，致使體積過大，因此仍是按需引入較好

<template>
<div>
<e-charts class="echart-item" theme="ovilia-green" :options="option_default"></e-charts>
</div>
</template>

<script>
import ECharts from 'vue-echarts'
let echarts = require('echarts/lib/echarts')

// 引入線形圖組件
require('echarts/lib/chart/line')
// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'myecharts',
  data: function () {
    return {
      option_default: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      }

    }
  },
  components: {
    ECharts
  }
}
</script>

<style lang="less" scoped>
  @gray_light:#999;
  @gray_normal:#666;
  @gray_dark:#333;
  @font_small:12px;
  .stats-chart{
    border-top:1px solid #eee;
    padding-top: 10px;
    margin-bottom: 20px;
  p{font-size: @font_small;color:@gray_light;}
  .stats-chart-item{
    border:1px solid #eee;
    border-radius: 5px;
    padding:15px 0px;
  .chart-item-name{margin-left:20px;margin-bottom:5px; font-size: @font_small;color:@gray_light}
  .chart-item-total{margin-left:20px;font-size:22px;color:@gray_dark}
  .echart-item{
    width: 100%;
    margin-top: -45px;
    margin-bottom: -35px;
    max-height: 220px;
  @media (min-width: 768px) {
    max-height: 260px;
  }
  @media (min-width: 1280px) {
    max-height: 300px;
  }
  }
  }
  }
</style>

echarts按需引入

 

幾點問題：

tooltip顯示問題（即鼠標上浮到echarts組件會顯示x、y座標數據）

一、須要引入提示框和title組件

// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

二、在圖標option中設置tooltip的trigger屬性

 tooltip: {
          trigger: 'axis'
        },

trigger：默認 'item' 可選‘item|axis’

item：鼠標上浮到具體的點位顯示tip提示，並只顯示一條線的

axis：鼠標上浮到echart表格顯示tip提示，可顯示多條線

說明文檔地址：https://echarts.baidu.com/echarts2/doc/doc.html#Tooltip

 

Y軸標籤值太長顯示不全問題

未處理以前的效果

處理：設置option下的有關屬性

grid.left:grid組件距離容器左側的距離，默認10%，能夠修改爲像素值和百分比

grid.right:grid組件距離容器右側的距離，默認10%，能夠修改爲像素值和百分比

yAxis.axisLabel.margin：刻度標籤與軸線之間的距離。默認值是8
yAxis.axisLabel.formatter：刻度標籤的內容格式器，支持字符串模板和回調函數兩種形式。好比能夠設置太長了換行之類的。

設置參數以下：

    option：{
              grid: {show:'true',borderWidth:'0',left: '15%',right:'15%'},
              yAxis: {
                type: 'value',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  formatter: function (value, index) {
                    if (value >= 100000 && value < 10000000) {
                      value = value / 10000 + '萬'
                    } else if (value >= 10000000) {
                      value = value / 10000000 + '千萬'
                    }
                    return value
                  }
                }
              },
    ……
        }

echartsY軸邊距設置

引用： https://blog.csdn.net/dandelion_drq/article/details/79270597

 

相關屬性說明：（項目中使用的是line線形圖組件）

lineStyle:線條顏色設置

lineStyle:{
                color:'#3ca0ff',
                type:'solid'
              }

areaStyle：線條下的陰影顏色設置

  areaStyle:{
                color:'#c1eaff'
              }

 series.itemStyle 數據節點顏色設置

 series.smooth 平滑曲線設置

 series: [{                data: [],                type: 'line',                smooth: true,                areaStyle: {},                itemStyle: {                  normal: {                    color:'#00a9ff'                  }                }              }]