Echarts「柱状图」基础配置

作者: 回到唐朝做IT | 来源:发表于2020-03-24 19:02 被阅读0次

Echarts「折线图」基础配置
Echarts给Y轴、tooltip添加单位
React-Echarts-通用配置
Echarts 饼状图基础配置和高度自适应 formatter
Echarts「柱状图」基础配置
vue项目中配置ECharts
echarts的学习与实战大数据首页
写两个ECharts联动
Echarts
vue中使用echarts总结

一、使用步骤

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.准备一个具备大小的 DOM 容器

<div id="main" style="width: 600px;height:400px;"></div>

3.初始化 echarts 实例对象

//this.$echarts.init(document.getElementById('main')).dispose(); //销毁前一个实例
var myChart = this.$echarts.init(document.getElementById('main'))

4.指定配置项和数据(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: 'bar'
    }
  ]
}

5.将配置项设置给 echarts 实例对象

myChart.setOption(option)

二、Echarts-基础配置

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

title：标题组件，包含主标题和副标题
legend：图例组件,展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示
tooltip：提示框组件
grid：直角坐标系内绘图网格
color：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从默认列表中取颜色作为系列颜色
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series:系列列表。每个系列通过 type 决定自己的图表类型，bar:柱状图，line:折线图

三、柱状图图表根据需求定制

title图表标题配置

居中显示标题和副标.
如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐
如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
在textStyle标题字体18px颜色为#617be3

title: {
     text: '标题',
     subtext: '副标题',  //副标题
     left: 'center',   
     top: '10px',
     bottom:'auto',
     textStyle: {
        fontSize: 18,
        color: '#617be3'
     }
},

legend图例配置

更改图例文字大小颜色以及位置

legend: {
    // 距离容器10%
    right: "10%",
    // 修饰图例文字的颜色
    textStyle: {
     color: "#4c9bfd",
     fontSize: "12"
   }
  // data: ["旅游行业", "游戏行业"]   // 如果series 里面设置了name，此时图例组件的data可以省略
},

tooltip提示框配置

悬浮显示当前柱子数据

//trigger:可选item:数据项图形触发（散点图，饼图） || axis:坐标轴触发（柱状图，折线图）  || none:什么都不触发
tooltip: {
   trigger: 'axis', 
    // formatter: '{a} <br/>{b} : {c} ({d}%)'
    formatter: '{c}',  //折线图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
    axisPointer: {
      type: 'shadow', //line:直线指示器 || shadow:阴影指示器  || none 无指示器 || cross 十字准星指示器
    }
 },

grid绘图网格配置

修改图表柱形颜色#2f89cf
修改图表大小top 为 10px bottom 为 4% .grid 决定我们的柱状图的大小

color: ["#2f89cf"],
grid: {
  left: "0%",
  top: "10px",
  right: "0%",
  bottom: "4%",
  containLabel: true  //grid 区域是否包含坐标轴的刻度标签
},

color配置

//默认颜色表盘
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

X 轴相关设置 xAxis

文本颜色设置为rgba(255,255,255,.6)字体大小为 12px
X 轴线的样式不显示
去掉x轴刻度
修饰刻度标签的颜色

// 设置x轴标签文字样式
// x轴的文字颜色和大小
axisLabel: {
  color: "rgba(255,255,255,.6)",
  fontSize: "12"
},
// 修饰刻度标签的颜色  //或者通过textStyle设置
axisLabel: {
    textStyle: { 
       color: '#fff',
       fontWeight: 'normal',
       fontSize: '12',
     },
    //标签竖着显示
    formatter: function (val) {
        return val.split("").join("\n")
    },
//  x轴样式设置
axisLine: {
    show: false   //显示或隐藏
    // 如果想要设置单独的线条样式
     lineStyle: {
        color: "rgba(255,255,255,.1)",
        width: 1,
        type: "solid"
     }
},
// 刻度设置
axisTick: {
    show: false  // 去除刻度
},
//坐标轴两边留白策略
boundaryGap: true,  //一般柱状图要留白  折线图不用

Y 轴相关定制yAxis

文本颜色设置为rgba(255,255,255,.6) 字体大小为 12px
Y 轴线条样式更改为 1 像素的rgba(255,255,255,.1)边框
分隔线的颜色修饰为 1 像素的rgba(255,255,255,.1)

// y 轴文字标签样式
axisLabel: {
   textStyle: {
      color: "rgba(255,255,255,.6)",
       fontSize: "12"
   }
},
 // y轴线条样式
axisLine: {
    lineStyle: {
       color: "rgba(255,255,255,.1)",
       // width: 1,
       // type: "solid"
    }
},
 // y 轴分隔线样式
splitLine: {
    lineStyle: {
       color: "rgba(255,255,255,.1)"
     }
}

series图标数据相关配置

修改柱子宽度barWidth
修改柱形为圆角
为每个柱子定义不同颜色且在柱子上方显示数据

series: [{
        name: "直接访问",
        type: "bar",
        // 修改柱子宽度
        barWidth: "35%",
        data: [10, 52, 200, 334, 390, 330, 220],
        itemStyle: {
            // 修改柱子圆角
            barBorderRadius: 5,
            //定义柱子不同颜色
            normal: {
                color: function (params) {
                    var colorList = [
                      '#67C23A', '#B5C334', '#ffa41b', '#E87C25', '#27727B',
                      '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                      '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                },
                //显示柱子上方数据
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}:{c}'   //折线图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
                }
            }
        }
        //折线图选项
        //smooth: true,折线比较圆滑，平稳过渡
}]

更换对应数据

// x轴中更换data数据
 data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据
 data: [200, 300, 300, 900, 1500, 1200, 600]

让图表跟随屏幕自适应

window.addEventListener('resize', function() {
  myChart.resize()
})

注意：

echarts初始化要在mounted中进行，等dom元素挂载完毕
若是使用tab切换echarts，则使用watch监听tab变化同时用v-if重新渲染页面，并且可以销毁前一个echarts实例

this.$echarts.init(document.getElementById('main')).dispose() //销毁前一个echarts实例

 watch: { // 监测变化
    tabIndex(value) {
      if (value == 0) {
        this.$nextTick(() => {
          this.drawLine()
        })
      } else if (value == 2) {
        this.$nextTick(() => {
          this.drawBar()
        })
      }
    }
  },

echarts官网
 echarts社区