echarts-柱状图配置详解

标题的各类效果 字号 颜色 描边 对齐 ....

    title: {
      text: '入门示例',
      textStyle: {
        color: '#f35' ,
        textBorderColor:'#000',
        textBorderWidth:1,
      },
      textAlign: 'auto',
      borderColor: '#f35',
      borderWidth: 1 ,
      borderRadius:4,
    },

 

    legend: {//图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
      data: ['销量','热度']
    },

    toolbox:{// 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature:{
        saveAsImage: {},//导出图片
        dataView: {},//数据视图
        restore:{},//重置
        dataZoom:{},//数据区域缩放
        magicType: {//动态类型切换
          type:['bar','line']
        }
      }
    },

 

 这里有两类数据 销量和热度  arg就是当前item 类目的数组

label 标签 决定是否显示  显示在 柱状图/上部/内部/外部    还可以指定旋转角度

    tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
      trigger:'axis', // 鼠标只要在轴上就会触发
      triggerOn:'click', // 触发方式 一般不用 click 简化用户操作
      //formatter:`{a}（系列名称），{b}（类目值），{c}（数值）`   点击时的回调 可以是模板字符串 也可以是函数
      formatter:function (arg) {
        return arg[1].name + arg[1].data
      }
    },

    label:{ // 柱状图 内部 显示数值
      show:true,
      rotate:30,
    },

 

// X Y 轴数据互换可以 变成横向柱状图

    xAxis: { // X Y 轴数据互换可以 变成横向柱状图

    },
    yAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },

 

series 系列数组里有两组对象 第一个销量里添加了 标识 最大值 和最小值的功能以及 标注平均值虚线 

series: [// 核心设置  系列
      {
        name: '销量',
        type: 'bar',
        data: [157, 256, 789, 70, 450, 120],
        markPoint:{ // 标注最大值和最小值
          data:[
            {
              type:'max',name: '最大值'
            },
            {
              type:'min',name: '最小值'
            }
          ]
        },
        markLine:{ // 设置平均值
          data:[
            {
              type:'average',name:'平均值'
            }
          ]
        }
      },
      {
        name: '热度',
        type: 'bar',
        data: [257, 156, 489,170, 250, 180],
      }
    ]
  };

为了演示多一些  效果堆叠起来了 样子有点丑  下面展示全貌和完整的配置

  let options1 =   {
    title: {
      text: '入门示例',
      textStyle: {
        color: '#f35' ,
        textBorderColor:'#000',
        textBorderWidth:1,
      },
      textAlign: 'auto',
      borderColor: '#f35',
      borderWidth: 1 ,
      borderRadius:4,
    },
    tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
      trigger:'axis', // 鼠标只要在轴上就会触发
      triggerOn:'click', // 触发方式 一般不用 click 简化用户操作
      //formatter:`{a}（系列名称），{b}（类目值），{c}（数值）`   点击时的回调 可以是模板字符串 也可以是函数
      formatter:function (arg) {
        return arg[1].name + arg[1].data
      }
    },
    toolbox:{// 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature:{
        saveAsImage: {},//导出图片
        dataView: {},//数据视图
        restore:{},//重置
        dataZoom:{},//数据区域缩放
        magicType: {//动态类型切换
          type:['bar','line']
        }
      }
    },
    label:{ // 柱状图 内部 显示数值
      show:true,
      rotate:30,
    },
    legend: {//图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
      data: ['销量','热度']
    },
    xAxis: { // X Y 轴数据互换可以 变成横向柱状图
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {

    },
    series: [// 核心设置  系列
      {
        name: '销量',
        type: 'bar',
        data: [157, 256, 789, 70, 450, 120],
        markPoint:{ // 标注最大值和最小值
          data:[
            {
              type:'max',name: '最大值'
            },
            {
              type:'min',name: '最小值'
            }
          ]
        },
        markLine:{ // 设置平均值
          data:[
            {
              type:'average',name:'平均值'
            }
          ]
        }
      },
      {
        name: '热度',
        type: 'bar',
        data: [257, 156, 489,170, 250, 180],
      }
    ]
  };