Echarts「折線(xiàn)圖」基礎(chǔ)配置

Echarts「柱狀圖」基礎(chǔ)配置

一、使用步驟

1.引入 echarts

（1）在script引入

<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>

（2）命令引入

npm i echarts   
//或者
yarn add echarts

在main.js全局引入

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts
2.準(zhǔn)備一個(gè)具備大小的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>
3.初始化 echarts 實(shí)例對(duì)象
//this.$echarts.init(document.getElementById('main')).dispose(); //銷(xiāo)毀前一個(gè)實(shí)例
var myChart = this.$echarts.init(document.getElementById('main'))
4.指定配置項(xiàng)和數(shù)據(jù)(option)
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
5.將配置項(xiàng)設(shè)置給 echarts 實(shí)例對(duì)象
myChart.setOption(option)

二、Echarts-基礎(chǔ)配置

需要了解的主要配置title legend tooltip grid color xAxis yAxis series dataZoom

title：標(biāo)題組件，包含主標(biāo)題和副標(biāo)題
legend：圖例組件,展現(xiàn)了不同系列的標(biāo)記，顏色和名字。可以通過(guò)點(diǎn)擊圖例控制哪些系列不顯示
tooltip：提示框組件
grid：直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
color：調(diào)色盤(pán)顏色列表。如果系列沒(méi)有設(shè)置顏色，則會(huì)依次循環(huán)從默認(rèn)列表中取顏色作為系列顏色
xAxis：直角坐標(biāo)系 grid 中的 x 軸
yAxis：直角坐標(biāo)系 grid 中的 y 軸
series:系列列表。每個(gè)系列通過(guò) type 決定自己的圖表類(lèi)型，bar:柱狀圖，line:折線(xiàn)圖
dataZoom:x軸數(shù)據(jù)過(guò)長(zhǎng)，使用滾動(dòng)條

三、折線(xiàn)圖圖表根據(jù)需求定制

圖表標(biāo)題設(shè)置
  • 居中顯示標(biāo)題和副標(biāo).
    如果 left 的值為 'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊
    如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊
  • 在textStyle中設(shè)置標(biāo)題居中顯示、字體大小、顏色
title: {
       text: '折線(xiàn)圖',
       top: '1%',  //距離頂部距離
       left: 'center',   //標(biāo)題居中
       textStyle: {
          align: 'center',  //字體居中
          color: '#fff',  //字體顏色
          fontSize: 20,  //字體大小
       },
},
圖例組件設(shè)置
  • 修改圖例位置，可通過(guò)top left right bottom更改
  • 在textStyle中設(shè)置圖例顏色大小、背景顏色、邊距圓角等
//圖例組件配置
legend: {
     top: "8%", //距離頂部位置
     textStyle: {
        color: "#4c9bfd", //圖例文字顏色
        fontSize: 14, //圖例字體大小
        padding: 3, //內(nèi)邊距
        backgroundColor: 'rgba(0,0,0,.2)', //背景顏色
        borderRadius: 3 //圓角
     }
},
tooltip提示框配置
  • 鼠標(biāo)懸浮顯示的內(nèi)容狀態(tài)
  • 可簡(jiǎn)單配置，當(dāng)前配置了提示時(shí)的數(shù)線(xiàn)條樣式
  • 當(dāng)使用trigger:'axis'且不配置formatter到時(shí)候，彈框內(nèi)可以顯示所有類(lèi)別的數(shù)據(jù)
  • 當(dāng)配置了formatter: '{c}',則彈框只顯示鼠標(biāo)觸發(fā)點(diǎn)的已配置的數(shù)據(jù)
  • 折線(xiàn)圖、柱狀（條形）圖、K線(xiàn)圖 : {a}（系列名稱(chēng)），（類(lèi)目值），{c}（數(shù)值）, u0z1t8os（無(wú)） 
tooltip: {
   //axis:坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線(xiàn)圖等會(huì)使用類(lèi)目軸的圖表中使用
   //item:數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類(lèi)目軸的圖表中使用
   trigger: 'axis',
   axisPointer: {
      type: 'line', //line: 直線(xiàn)指示器 shadow:陰影指示器 cross:十字準(zhǔn)星指示器
      lineStyle: { //axisPointer.type 為 'line' 時(shí)有效
        color: {
           type: 'linear', //linear:線(xiàn)性漸變  radial:徑向漸變
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
           colorStops: [{
               offset: 0, // 0% 處的顏色
               color: 'rgba(0, 255, 233,0)'
               }, {
               offset: 0.5,
               color: 'rgba(255, 255, 255,1)',
                }, {
                offset: 1, // 100% 處的顏色
                color: 'rgba(0, 255, 233,0)'
           }],
           global: false // 缺省為 false
       }
    },
},
        // 提示框浮層內(nèi)容格式器
       //formatter: '{a} <br/> : {c} 元'
},
grid繪圖網(wǎng)格配置
  • 可配置網(wǎng)格的所處的位置
grid: {
    top: '20%',
    left: '5%',
    right: '2%',
    bottom: '10%',
    containLabel: false, //grid 區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽
},
X 軸相關(guān)設(shè)置 xAxis
  • axisLine可配置x軸是否顯示、顏色、寬度、虛線(xiàn)
  • axisLabelx軸刻度標(biāo)簽的相關(guān)設(shè)置
  • splitLinex軸分割線(xiàn)樣式
  • axisTick坐標(biāo)軸刻度配置
  • data可配置x軸類(lèi)目
  //X軸配置
  xAxis: [{
    type: 'category',
    show: true, //false:刻度、類(lèi)目都不顯示
    //x軸線(xiàn)配置
    axisLine: {
      show: true, //false: 只是x軸線(xiàn)不顯示
      lineStyle: {
        color: 'rgba(255,255,255,0.2)', //x軸線(xiàn)顏色
        width: 1, //寬度
        type: 'solid', //solid：實(shí)線(xiàn) dashed：虛線(xiàn) dotted:虛點(diǎn)
      }
    },
    //x軸刻度標(biāo)簽的相關(guān)設(shè)置
    axisLabel: {
      color: '#fff',
      fontSize: 12, //文字大小 不加單位
    },
    //x軸分割線(xiàn)樣式
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.1)' //y軸分割線(xiàn)顏色
      }
    },
    //坐標(biāo)軸刻度配置
    axisTick: {
      show: false, //是否顯示
    },
    //坐標(biāo)軸兩邊留白策略
    boundaryGap: true, //true:距離Y軸有距離，false：從Y軸起始
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }],
X軸過(guò)長(zhǎng)實(shí)現(xiàn)滾動(dòng)條dataZoom
  • type:'slider'顯示滾動(dòng)條，可以使用滾動(dòng)條拖動(dòng)
  • type:'inside'無(wú)滾動(dòng)條，在屏幕拖動(dòng)滑動(dòng)
  • left、bottom滾動(dòng)條位置
  • start滾動(dòng)條起始位置
  • end滾動(dòng)條截至位置（按比例分割你的柱狀圖x軸長(zhǎng)度）
// x軸滾動(dòng)
dataZoom: [{
    type: 'slider', //顯示滾動(dòng)條，可以使用滾動(dòng)條拖動(dòng)；'inside'：無(wú)滾動(dòng)條，在屏幕拖動(dòng)滑動(dòng)
    show: true,    //flase直接隱藏圖形
    filterMode: 'filter', //過(guò)濾數(shù)據(jù)后使另外的軸也能自動(dòng)適應(yīng)當(dāng)前數(shù)據(jù)的范圍,'none': 不過(guò)濾數(shù)據(jù)，只改變數(shù)軸范圍
    left: '10%', //滾動(dòng)條靠左側(cè)的百分比
    right: '10%',
    bottom: 0, //滾動(dòng)條底部位置
    start: 0, //滾動(dòng)條的起始位置
    end: 50 //滾動(dòng)條的截止位置（按比例分割你的柱狀圖x軸長(zhǎng)度）
}],
Y 軸相關(guān)定制yAxis
  • axisLiney軸線(xiàn)配置
  • splitLine分割線(xiàn)樣式
  • axisLabel y軸刻度標(biāo)簽配置
  • axisTick坐標(biāo)軸刻度配置
  //Y軸配置
  yAxis: [{
    type: 'value', //value:數(shù)值軸，適用于連續(xù)數(shù)據(jù)  category: 類(lèi)目軸，適用于離散的類(lèi)目數(shù)據(jù)
    // min: 0,
    // max: 140,
    splitNumber: 4, //坐標(biāo)軸的分割段數(shù)預(yù)估數(shù)
    //分割線(xiàn)樣式
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.1)' //y軸分割線(xiàn)顏色
      }
    },
    //y軸線(xiàn)配置
    axisLine: {
      show: true, //y軸線(xiàn)是否顯示
      lineStyle: {
        color: 'rgba(255,255,255,0.2)', //y軸線(xiàn)顏色
        width: 1, //寬度
        type: 'solid', //solid：實(shí)線(xiàn) dashed：虛線(xiàn) dotted:虛點(diǎn)
      }
    },
    //y軸刻度標(biāo)簽配置
    axisLabel: {
      show: true, //是否顯示
      margin: 20, //與y軸邊距
      textStyle: {
        color: '#d1e6eb', //刻度標(biāo)簽顏色
      },
    },
    //坐標(biāo)軸刻度配置
    axisTick: {
      show: false, //一般不顯示
    },
  }],
series圖標(biāo)數(shù)據(jù)相關(guān)配置
  • 折線(xiàn)平滑過(guò)渡 smooth:true
  • itemStyle折線(xiàn)拐點(diǎn)標(biāo)志的樣式
  • lineStyle折線(xiàn)樣式配置
  • label折線(xiàn)拐點(diǎn)文本標(biāo)簽
  • areaStyle分隔區(qū)域的樣式設(shè)置，折線(xiàn)背景
  • stack數(shù)據(jù)堆疊，多條折線(xiàn)同個(gè)類(lèi)目軸上系列配置相同的stack值后，后一個(gè)系列的值會(huì)在前一個(gè)系列的值上相加
series: [{
  name: '銷(xiāo)售金額',
  type: 'line',
  // smooth: true, //是否平滑過(guò)渡
  showAllSymbol: true,  // 如果 false 則只有在 tooltip hover 的時(shí)候顯示
  symbol: 'circle', //rect
  symbolSize: 25, //折線(xiàn)拐點(diǎn)標(biāo)志大小
  //折線(xiàn)拐點(diǎn)標(biāo)志的樣式
  itemStyle: {
    color: "#deff8b", //填充色
    borderColor: "#fff", //邊框顏色
    borderWidth: 3, //邊框?qū)挾?    shadowColor: 'rgba(0, 0, 0, .3)', //陰影
    shadowBlur: 0, //虛化
    shadowOffsetY: 2, //陰影向下位移
    shadowOffsetX: 2, //陰影向右位移
  },
  // 折線(xiàn)樣式配置
  lineStyle: {
    normal: {
      color: "#00ca95", //折線(xiàn)顏色
      shadowColor: 'rgba(0, 0, 0, .3)', //陰影顏色
      shadowBlur: 1, //陰影虛化
      shadowOffsetY: 5, //陰影向下位移
      shadowOffsetX: 5, //陰影向右位移
    },
  },
  // 折線(xiàn)拐點(diǎn)文本標(biāo)簽
  label: {
    show: true, //顯示
    position: 'bottom', //文本標(biāo)簽位置
    textStyle: {
      color: '#00ca95', //文本標(biāo)簽字體顏色
    }
  },
  tooltip: {
    show: true
  },
  //分隔區(qū)域的樣式設(shè)置，帶背景,注釋則不顯示
   areaStyle: {
      // 線(xiàn)性漸變，前四個(gè)參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比
     color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
           offset: 0,
           color: '#eb64fb' // 0% 處的顏色
         }, {
            offset: 1,
            color: '#3fbbff0d' // 100% 處的顏色
         }],
        global: false // 缺省為 false
      }
   },  
  //stack:'銷(xiāo)售金額', //此演示只有一條數(shù)據(jù)，若是當(dāng)前series數(shù)組中有多條數(shù)據(jù)中，
  //可每條數(shù)據(jù)設(shè)置同樣的stack值，屆時(shí)折線(xiàn)圖數(shù)據(jù)就會(huì)疊加，不會(huì)有交叉現(xiàn)象
  data: [281.55, 398.35, 214.02, 119.55, 289.57, 356.14, 456],
}]
更換對(duì)應(yīng)數(shù)據(jù)
// x軸中更換data數(shù)據(jù)
 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// series 更換數(shù)據(jù)
 data: [281.55, 398.35, 214.02, 119.55, 289.57, 356.14, 456],
讓圖表跟隨屏幕自適應(yīng)
window.addEventListener('resize', function() {
  myChart.resize()
})
配置后
配置前
最后編輯于 ：
?著作權(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)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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