Echart不完全使用小記錄

簡(jiǎn)單記錄一下在項(xiàng)目中使用全過(guò)程中遇到了的問(wèn)題以及踩坑了不熟悉的配置項(xiàng)。前期使用發(fā)現(xiàn)配置項(xiàng)太多了，一臉懵逼，后來(lái)發(fā)現(xiàn)在實(shí)例上試配置項(xiàng)熟悉的快一些。以下是使用過(guò)程中摘抄官網(wǎng)以及實(shí)際使用記錄。
還有很多沒(méi)有了解的待以后慢慢學(xué)習(xí)

一、簡(jiǎn)單上手echart圖表

1.獲取ECharts.

可以通過(guò)以下4種方式獲取。

2.引入 ECharts
3.繪制圖表
  1. 在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器。
<body>
    <!-- 為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

可以通過(guò) echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過(guò) setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖，下面是完整代碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項(xiàng)和數(shù)據(jù)
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
      // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

二、在vue項(xiàng)目中的使用

    1. npm安裝echarts
      在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護(hù)的，從 3.1.1 開(kāi)始由官方 EFE 維護(hù) npm 上 ECharts 和 zrender 的 package。
      使用如下命令通過(guò) npm 安裝 ECharts:
    npm install echarts --save
    1. 通過(guò) npm 安裝的 echarts 會(huì)出現(xiàn)在 myProject/node_modules 目錄下，從而可以直接在項(xiàng)目代碼中得到 echarts，例如：
  • 2.1. 使用 CommonJS - require得到echarts(引入的是全部
    var echarts = require('echarts') 
      var echarts = require('echarts'); 
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
    title: { text: 'ECharts 入門示例' },
    tooltip: {},
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
  • 2.2 引入Echarts使用 ES Module 得到echarts
    import * as echarts from 'echarts';

三、具體使用

1、繪制餅狀圖像：

  • 配置項(xiàng)屬性

    1. avoidLabel- avoidLabelOverlap
    2. labelLine- [labelLine](https://www.echartsjs.com/zh/option.html#series- pie.labelLine). 標(biāo)簽的視覺(jué)引導(dǎo)線樣式，在 label 位置 設(shè)置為'outside'的時(shí)候會(huì)顯示視覺(jué)引導(dǎo)線

    3.legend- legend
    圖例組件. 展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字?？梢酝ㄟ^(guò)點(diǎn)擊圖例控制哪些系列不顯示。

    image.png

    1. 系列的顏色。
      只能自己設(shè)置顏色數(shù)組進(jìn)而去修改。

    2. color. 調(diào)色盤顏色列表。如果系列沒(méi)有設(shè)置顏色，則會(huì)依次循環(huán)從該列表中取顏色作為系列顏色。

    3. tooltip. tooltip
      提示框組件。

      tooltip.trigger string

      [ default: 'item' ]

      觸發(fā)類型。

      可選：(如下3個(gè)）

      • ' item '
        數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類目軸的圖表中使用。

      • 'axis'
        坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表中使用。

      在 ECharts 2.x 中只支持類目軸上使用 axis trigger，在 ECharts 3 中支持在 直角坐標(biāo)系和極坐標(biāo)系上的所有類型的軸。并且可以通過(guò) axisPointer.axis 指定坐標(biāo)軸。

      • 'none' 什么都不觸發(fā)。
    • tooltip.**formatter** - tooltip.formatter
      tooltip.formatter string, Function
      提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。
      1. 字符串模板

模板變量有 {a}, ，{c}，u0z1t8os，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。 在 trigger 為 'axis' 的時(shí)候，會(huì)有多個(gè)系列的數(shù)據(jù)，此時(shí)可以通過(guò) {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a}，，{c}，u0z1t8os 含義不一樣。 其中變量{a}, , {c}, u0z1t8os在不同圖表類型下代表數(shù)據(jù)含義為：

  • 折線（區(qū)域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），（類目值），{c}（數(shù)值）, u0z1t8os（無(wú)）

  • 散點(diǎn)圖（氣泡）圖 : {a}（系列名稱），（數(shù)據(jù)名稱），{c}（數(shù)值數(shù)組）, u0z1t8os（無(wú)）

  • 地圖 : {a}（系列名稱），（區(qū)域名稱），{c}（合并數(shù)值）, u0z1t8os（無(wú)）

  • 餅圖、儀表盤、漏斗圖: {a}（系列名稱），（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）, u0z1t8os（百分比）

更多其它圖表模板變量的含義可以見(jiàn)相應(yīng)的圖表的 label.formatter 配置項(xiàng)。

示例：

formatter: '{b0}: {c0}<br />{b1}: {c1}'

2, 回調(diào)函數(shù)

回調(diào)函數(shù)格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一個(gè)參數(shù) params 是 formatter 需要的數(shù)據(jù)集。格式如下：

{
    componentType: 'series',
    // 系列類型
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 數(shù)據(jù)名，類目名
    name: string,
    // 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
    dataIndex: number,
    // 傳入的原始數(shù)據(jù)項(xiàng)
    data: Object,
    // 傳入的數(shù)據(jù)值。在多數(shù)系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐標(biāo)軸 encode 映射信息，
    // key 為坐標(biāo)軸（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然為數(shù)組，不會(huì)為 null/undefied，表示 dimension index 。
    // 其內(nèi)容如：
    // {
    //     x: [2] // dimension index 為 2 的數(shù)據(jù)映射到 x 軸
    //     y: [0] // dimension index 為 0 的數(shù)據(jù)映射到 y 軸
    // }
    encode: Object,
    // 維度名列表
    dimensionNames: Array<String>,
    // 數(shù)據(jù)的維度 index，如 0 或 1 或 2 ...
    // 僅在雷達(dá)圖中使用。
dimensionIndex: number,
    // 數(shù)據(jù)圖形的顏色
    color: string,

    // 餅圖的百分比
    percent: number,
注：encode 和 dimensionNames 的使用方式，例如：

如果數(shù)據(jù)為：

dataset: {
    source: [
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
}
則可這樣得到 y 軸對(duì)應(yīng)的 value：

params.value[params.encode.y[0]]
如果數(shù)據(jù)為：

dataset: {
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
    ]
  }
}
等等。。。
  1. grid。
    直角坐標(biāo)系內(nèi)繪圖網(wǎng)格，單個(gè) grid 內(nèi)最多可以放置上下兩個(gè) X 軸，左右兩個(gè) Y 軸?？梢栽诰W(wǎng)格上繪制折線圖，柱狀圖，散點(diǎn)圖（氣泡圖）。

在 ECharts 2.x 里單個(gè) echarts 實(shí)例中最多只能存在一個(gè) grid 組件，在 ECharts 3 中可以存在任意個(gè) grid 組件。

  1. xAxis.boundaryGap ----- boundaryGap
    控制x軸坐標(biāo)位置。
    坐標(biāo)軸兩邊留白策略，類目軸和非類目軸的設(shè)置和表現(xiàn)不一樣。（category-類目）
// boundaryGap值為false的時(shí)候，折線第一個(gè)點(diǎn)在y軸上
   boundaryGap: false,
折線樣式

echarts-設(shè)置折線樣式和X軸和Y軸的分割線樣式

image.png
//GMV近30天變化趨勢(shì)
      trendOption: {
        color: '#4359B7',
        title: {
          text: '支付訂單的訂單實(shí)付金額的總和',
          bottom: 8,
          left: 300,
          textStyle: {
            color: '#999',
            fontWeight: 'narmal'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '(一)<br/> {a} :  {c}',
          backgroundColor: '#fff',
          borderColor: '#4359B7',
          borderWidth: 1,
          textStyle: {
            color: '#666'
          },
          padding:[8,14]
        },
        xAxis: {
          data: [],
          type: 'category',
          splitNumber: 10,
          interval: 50, //強(qiáng)制設(shè)置坐標(biāo)軸分割間隔
          // boundaryGap: false, 
          nameGap: 26,
          // nameTextStyle: {
          //   padding: [4,5,6,7], //上 右 下 左 
          //   shadowColor: '#f00',
          //   width: '100px'
          // },
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#CCCCCC'
            }
          },
          axisLabel: {
            color: '#999'
          }
        },
        yAxis: {
          type: 'value',
          data: [],
          scale: true, //是否脫離0值
          splitLine: {  //分割線
            show: true  ,
            lineStyle: {
              color:'#ccc',
              width: 1,
              type: 'dotted'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'transparent',
              width: 1, //這里是為了突出顯示加上的  
            }
          },
          axisLabel: {
            color: '#999'
          },
          // axisPointer: {
          //   label: {
          //       formatter: function (params) {
          //         return '降水量  ' + params.value
          //             + (params.seriesData.length );
          //       }
          //   }
          // },
        },
        series: [{
          name: '支付訂單的訂單實(shí)付金額的總和 ',
          type: 'line', 
          data: [],     
          symbolSize: 6, //設(shè)置拐點(diǎn)大小
          symbol:'circle', // 設(shè)置拐點(diǎn)為實(shí)心圓
          // markLine: {
          //   silent: true,
          //   symbol: ['none', 'none'],
          //   data: [{
          //     yAxis: 0
          //   }, {
          //     yAxis: 2
          //   }, {
          //     yAxis: 4
          //   }, {
          //     yAxis: 6
          //   }, {
          //     yAxis: 8
          //   },{
          //     yAxis: 10
          //   }, {
          //     yAxis: 12
          //   }]
          // }
        }]
      },

類目軸中 boundaryGap 可以配置為 true 和 false。默認(rèn)為 true，這時(shí)候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間。

非類目軸，包括時(shí)間，數(shù)值，對(duì)數(shù)軸，boundaryGap是一個(gè)兩個(gè)值的數(shù)組，分別表示數(shù)據(jù)最小值和最大值的延伸范圍，可以直接設(shè)置數(shù)值或者相對(duì)的百分比，在設(shè)置 min 和 max 后無(wú)效。 示例：

boundaryGap: ['20%', '20%']

xAxis: {
        // type: 'category',  (類目
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
},
??好像有的不起作用。存疑

  • xAxis.axisTick.alignWithLabel - axisTick.alignWithLabel
    [ default: false ]
    類目軸中在 boundaryGap 為 true 的時(shí)候有效，可以保證刻度線和標(biāo)簽對(duì)齊。如下圖：

    image

  • xAxis.axisLine.onZero boolean - xAxis.axisLine.onZero
    xAxis.axisLine.onZero boolean
    [ default: true ]
    X 軸或者 Y 軸的軸線是否在另一個(gè)軸的 0 刻度上，只有在另一個(gè)軸為數(shù)值軸且包含 0 刻度時(shí)有效。

  • xAxis.axisLine.symbol string - xAxis.axisLine.symbol string

    xAxis.axisLine.symbol string, Array

    [ default: 'none' ]
    軸線兩邊的箭頭?？梢允亲址?，表示兩端使用同樣的箭頭；或者長(zhǎng)度為 2 的字符串?dāng)?shù)組，分別表示兩端的箭頭。默認(rèn)不顯示箭頭，即 'none'。兩端都顯示箭頭可以設(shè)置為 'arrow'，只在末端顯示箭頭可以設(shè)置為 ['none', 'arrow']。

  • xAxis.axisLabel.formatter
    xAxis.axisLabel.formatter string, Function
    [ default: null ]
    刻度標(biāo)簽的內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。
示例:
// 使用字符串模板，模板變量為刻度默認(rèn)標(biāo)簽 {value}
formatter: '{value} kg'

// 使用函數(shù)模板，函數(shù)參數(shù)分別為刻度數(shù)值（類目），刻度的索引
formatter: function (value, index) {
    // 格式化成月/日，只在第一個(gè)刻度顯示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getYear());
    }
    return texts.join('/');
}

刻度標(biāo)簽文字的顏色，默認(rèn)取 axisLine.lineStyle.color。支持回調(diào)函數(shù)，格式如下

(val: string) => Color

參數(shù)是標(biāo)簽的文本，返回顏色值，如下示例：

textStyle: {
    color: function (value, index) {
        return value >= 0 ? 'green' : 'red';
    }
}
  1. 控制y軸坐標(biāo)折線虛線展示。
yAxis: {
            // splitLine: {
            //     show: false
            // }
        },

虛線展示：
series: [{
          type: 'line',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          markLine: {
            silent: true,
            data: [{
                yAxis: 300
            }, {
                yAxis: 600
            }, {
                yAxis: 900
            }, {
                yAxis: 1200
            }, {
                yAxis: 1500
            }]
            }
        }]
      });

折線圖 ：折線圖
折線圖中x坐標(biāo)軸展示：
情況一：

image.png

情況二：
image.png

折線圖中y軸


image.png

以上為第一次在項(xiàng)目中使用echarts圖表不完全小結(jié)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇文章主要講述Echarts設(shè)置字體和線條的顏色相關(guān)操作筆記，希望文章對(duì)你有所幫助，主要是自己的在線筆記吧。我在...
    藍(lán)色夢(mèng)想家閱讀 10,278評(píng)論 1贊 1
  • Can't get dom width or height echarts解決方案 var mainContain...
    飛豹豹豹豹豹閱讀 1,726評(píng)論 0贊 0
  • 最近在實(shí)習(xí)期間，接手了一個(gè)數(shù)據(jù)搜索項(xiàng)目，需要我從后臺(tái)調(diào)取數(shù)據(jù)，并將之用折線圖直方圖顯示出來(lái)，并且可以將多組數(shù)據(jù)繪制...
    南客nk閱讀 8,257評(píng)論 3贊 21
  • <!DOCTYPE html> echarts <!-- --> // 基于準(zhǔn)備好的dom，初始化echarts實(shí)...
    安與和音閱讀 490評(píng)論 0贊 2
  • 一、簡(jiǎn)單介紹 Echart是百度研發(fā)團(tuán)隊(duì)開(kāi)發(fā)的一款報(bào)表視圖JS插件，功能十分強(qiáng)大，使用內(nèi)容做簡(jiǎn)單記錄；（EChar...
    Marin_chen閱讀 21,987評(píng)論 9贊 5

友情鏈接更多精彩內(nèi)容