快捷導(dǎo)航

vue+echarts圖表使用的問(wèn)題記錄

更新時(shí)間：2021年09月30日 10:42:01 作者：青煙小生

由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,眾所周知echarts是非常強(qiáng)大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下

前言

echarts是我最常用的一直圖表工具，而且也是一個(gè)很完整的生態(tài)和內(nèi)容，足夠我們平常的使用了。最近在做一個(gè)大數(shù)據(jù)平臺(tái)的頁(yè)面，需要用到比較多的圖表，就使用了echarts。使用過(guò)程中也碰到了一些比較難搞的問(wèn)題或者是配置手冊(cè)里面隱藏比較深的一些屬性，今天就來(lái)記錄下。

使用方法

1、取消圖表的網(wǎng)格，網(wǎng)格的顏色修改

// 控制網(wǎng)格線是否顯示
splitLine: {
    show: false,   // 網(wǎng)格線是否顯示
    //  改變樣式
    lineStyle: {
       color: '#ccc'   // 修改網(wǎng)格線顏色     
    }                            
},

2、坐標(biāo)軸的樣式修改

xAxis: [
              {
                  type: 'category',
                  boundaryGap: false,
                  data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                  axisLine:{
                      lineStyle:{color:"#ccc"}
                  },
                  axisTick: {
                    show: false // 去掉刻度
                  },
                  axisLabel:{//字體樣式的修改
                      show: true,//顯示隱藏
                       textStyle:{color:"#ccc"}
                  },
                  // 控制網(wǎng)格線是否顯示
splitLine: {
                 show: false,   // 網(wǎng)格線是否顯示
                 //  改變樣式
                 lineStyle: {
                     color: '#ccc'   // 修改網(wǎng)格線顏色     
                 }                            
},
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: '(次)',
                  axisLine:{
                      lineStyle:{color:"#ccc",fontSize:'16'}
                  },
                  axisTick: {
                    show: false // 去掉刻度
                  },
              }
          ],

3、圓環(huán)圖的一些樣式修改或者配置使用

//圓環(huán)中心的文字的樣式修改
title: {
          text: value.value+'次',
          subtext: value.name,
          x: 'center',
          y: 'center',
          itemGap: 0,
          textStyle: {
            fontSize: 26,
            fontWeight: 'bold',
            color: 'rgb(0,237,255)'
          },
          subtextStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#fff'
          },
},
//圓環(huán)的鼠標(biāo)移入的浮動(dòng)效果清除
series: [
            {
              hoverAnimation:false,//添加這個(gè)屬性
            }
    ]

4、多圖表切換，清除上一次加載的數(shù)據(jù)

在setOption里面加 true

option && myChart.setOption(option,true);

5、圖表的漸變顏色使用

echarts.graphic.LinearGradient

series: [
          {
            type: 'pie',
            center: ['50%', '49%'],
            radius: ['45%', '73%'],
            // minAngle: 0,
            startAngle: 0, // 漸變角度
            avoidLabelOverlap: true,   //是否啟用防止標(biāo)簽重疊
            emphasis: {
              label: {
                show: true,
                position: 'center'
              }
            },
            data: seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                label: {
                  show: true,
                }
              },
              normal: {
                color: function (params) { //顏色的漸變
                  var colorList = [
                    {
                      c1: '#3288FC',
                      c2: '#36B4FD'
                    },
                    {
                      c1: '#CBA0FF',
                      c2: '#598EFE'
                    },
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //顏色漸變函數(shù) 前四個(gè)參數(shù)分別表示四個(gè)位置依次為左、下、右、上

                    offset: 0,
                    color: colorList[params.dataIndex].c1
                  }, {
                    offset: 1,
                    color: colorList[params.dataIndex].c2
                  }])

                }
              }
            }
          }
        ]