Echarts食用指南—柱状图

开始准备

• 下载echarts

  npm install echarts --save
  

• 在main.js中引用

  import * as echarts from 'echarts';
  // 在之后的项目通过this.$echarts来调用方法
  Vue.prototype.$echarts = echarts;
  

绘制图表

• 准备一个容器，设置id（初始化图表需要绑定）和宽高

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

  注：如果有多个图表组件要进行引用，要确保每个图表组件初始化所绑定的id要不同

• 初始化echarts实例

  let myChart = this.$echarts.init(document.getElementById('main'));
  

• 指定图表的配置项

   let option = {
        title: {
          text: 'ECharts 柱状图 '
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
     }
  

• 绘制图表

  // 将图表配置项传入容器绘制的方法中绘制图表
  myChart.setOption(option);
  

柱状图配置项常用api实例

<template>
  <div id="chartBar"
    class="box"></div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {}
  },
  created() { },
  mounted() {
    this.initChartBar();
  },
  methods: {
    initChartBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('chartBar'));

      // 指定图表的配置项和数据
      let option = {
        title: {
          show: true, // 是否显示标题，默认true 
          text: 'ECharts 柱状图',// 主标题
          subtext: '柱状图', // 次标题
          // 注意：x,y不能与top,left等位置坐标同时使用，会使其失效
          x: 'left',// 标题横坐标的位置(center,left,right,px),默认left
          y: 'top', // 标题纵坐标的位置(center,top,bottom,px)，默认top
          itemGap: 10, // 主标题和次标题之间的间隔
          backgroundColor: 'white', // 标题的背景颜色，默认white
          // 主标题文字的样式
          textStyle: {
            color: 'green'
          },
          // 次标题文本样式设置
          subtextStyle: {
            fontSize: 12,
            color: '#8B2324'
          },
          borderWidth: 3, // 标题边框宽度
          borderColor: 'greenyellow', // 边框颜色
          borderRadius: 5, // 边框圆角

        },

        // 提示框组件，鼠标对数据进行操作时(移入，点击等)数据轴提示框时显示的信息
        tooltip: {
          show: true, // 是否展示提示框组件,默认true
          showContent: true, // 是否显示提示框浮层，默认true
          triggerOn: 'mousemove', // 触发条件，默认mousemove鼠标移入时触发,click鼠标点击,'mousemove|click'同时鼠标移动和点击时触发。
          enterable: false,// 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。此项设置为true之后与triggerOn设置为click体验最佳
          backgroundColor: "white", // 提示框浮层背景颜色
          borderColor: 'green', // 提示框浮层的边框颜色
          borderWidth: 3, // 提示框浮层的边框宽
          padding: 15, // 提示框浮层内边距
          textStyle: {
            color: 'black',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14,
          },// 提示框浮层的文本样式
          extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);', // 额外附加到浮层的 css 样式
          confine: false, // 是否将 tooltip 框限制在图表的区域内
          // 提示框浮沉的内容定制：支持字符串和回调函数两种
          // 模板变量{a}:series中的name(列名),{b}:xAxis中的对应data数组中的值(数据名),{c}:series中的data数组中的对应数据的值(数据值)
          // formatter: '{f}'
        },

        // x轴相关配置（与y轴属性大致相同）
        xAxis: {
          show: true, // 是否显示x轴数据(若此为false则后续关于name的配置将显示不出来)
          name: '名称', // 坐标轴的名称
          position: 'bottom',// x轴的位置:bottom,top
          type: 'category', // y轴(坐标轴)显示的类型：value,category,time,log,默认是category
          offset: 0, // x轴相对于默认位置的偏移,默认是0
          nameLocation: 'end',// 轴名称的相对位置
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          // 网格区域
          splitArea: {
            show: false  // 是否显示，默认为false
          },
          // 坐标轴标签
          axisLabel: {
            show: true,  // 是否显示,默认true
            inside: false, // 是否在轴内
            rotate: 0, // 标签旋转角度
            margin: 5, // 刻度标签与轴线之间的距离,与offset效果相同
            color: ''  // 标签的颜色设置,默认取轴线的颜色 
          },
          // 坐标轴刻度
          axisTick: {
            show: true,  // 是否显示,默认true
            inside: true,  // 是否在轴内，默认false
            length: 4,     // 刻度的长度
            // 坐标轴刻度的样式，默认取轴线的样式
            lineStyle: {
              color: 'red', // 刻度的颜色
              width: 1, // 刻度的宽度
              type: 'solid', // 刻度的线段类型 
            }
          },
        },

        // y轴相关配置（与x轴属性大致相同）
        yAxis: {
          show: true, // 是否显示y轴数据(若此为false则后续关于name的配置将显示不出来)
          type: 'value', // y轴(坐标轴)显示的类型：value,category,time,log
          name: '销量', // y轴(坐标轴)的名称
          nameLocation: 'center',// 坐标轴名称显示的位置: start,end,cneter(middle)
          nameTextStyle: {
            padding: [0, 0, 0, 0],
            color: "red",
            fontSize: 20
          }, // 坐标轴名称文字的样式,用法基本跟css一样
          nameGap: 10,//坐标轴名称与轴线之间的距离(不可以超过图表的最大宽高，否则会看不见)
          nameRotate: 180, //坐标轴名称旋转的角度值
          inverse: false, //是否反向坐标轴(默认false)
          splitNumber: 10, // 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
          // minInterval: 10
        },

        // 图例组件，旁边的数据颜色表示框
        legend: {
          show: true, // 是否显示，默认true
          // 当设置上左后，在设置下右属性则失效,左右还能控制图例标记和的文本位置方向
          left: '85%', // 组件距离容器左边的距离'left','right','center','20%'，默认center
          top: '5%',// 组件距离容器左边的距离'top','bottom','center','20%',默认top
          // right: 'right',
          // 设置图例组件的宽高，与图例组件的排列方式orient有关:horizontal对应width,vertical对应height
          // height: '20%',
          width: '40%',
          orient: 'vertical', //图例的排列方向：horizontal:水平；vertical: 垂直：
          align: 'left', // 图例标记和文本的对齐:right:文本在前;left:图例标记在前,默认right
          padding: 5, // 图例的内边距，可以以数组格式传入四个方位
          itemGap: 10,// 图例每项之间的间隔(默认10)
          itemWidth: 20,// 图例标记的图形宽度(默认25)
          itemHeight: 14, // 图例标记的图形高度(默认14)
          // 自定义文本
          // formatter: function (a) {
          //   console.log(a)
          // }
          inactiveColor: '#ccc',// 图例选中关闭时的颜色
          // 选中模式：false，true，'single','multiple'
          // 同时只能选中一个和同时能选中多个，true与'multiple'相同效果
          selectedMode: 'multiple',
          textStyle: {
          }, // 文本的样式
          tooltip: {  // 图列提示框，默认不显示
            show: false,
            // 其他详情信息参考提示框组件
          },
          data: [
            {
              name: '销量',
              icon: 'circle',// 图例图表的形状
              textStyle: {
                color: '#8cc269',  // 单独设置某一个图列的颜色
                backgroundColor: 'white' // 单独设置某一个图列的字体背景色,默认白色
              }
            }
          ],// 图例组件显示，与series中data的name对应，默认显示的是name中的全部，可直接写['销售'],默认第一个为name属性
          backgroundColor: 'white',// 图例组件的背景颜色，默认white
          borderWidth: 1,// 图例组件边框线框，默认为0(没有现款)
          borderColor: 'green',// 边框颜色，该项要设置边框线宽显示
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            legendHoverLink: true,  // 是否启用图列 hover 时的联动高亮,默认true
            barWidth: '50%',// 柱子的宽度
            // barCategoryGap: '20%',// 柱间距(注意柱子宽度和柱间距同时设置只有一个生效)
            // 柱子上的标签文字
            label: {
              show: true,// 是否显示,默认false
              rotate: 0,// 字体旋转角度,默认0
              position: '', // 显示的位置: top,bottom,['10px', '10px'],默认显示柱子中间
              color: '#eee',// 标签文字字体颜色
            },
            // 柱子的形状设置
            itemStyle: {
              color: '#b9dec9', // 柱子的颜色
              barBorderRadius: [1, 1, 0, 0], // 设置柱子四个圆角(边框形状)
            },
            // 最大值最小值标注
            markPoint: {
              data: [
                {
                  type: 'max', name: '最大值'
                },
                {
                  type: 'min', name: '最小值'
                }
              ]
            },
            // 平均值标注
            markLine: {
              data: [
                {
                  type: 'average', name: '平均值'
                }
              ]
            }
          },

        ]
      }
      // 绘制图表
      myChart.setOption(option);
    }
  }
}
</script>

<style  scoped>
.box {
  width: 500px;
  height: 600px;
}
</style>