02-Echarts-柱状图和通用配置

Echarts-柱状图

  • 步骤1 ECharts 最基本的代码结构
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
  </head>

  <body>
    <div style="width: 600px; height: 400px"></div>
    <script>
      var mCharts = echarts.init(document.querySelector('div')) // 初始化echarts实例对象
      var option = {}
      mCharts.setOption(option)
    </script>
  </body>
</html>

  • 步骤2 准备x轴的数据
 var xDataArr = ['张三','李四','王五','闰土','小明','茅台','二妞','大强',] // 准备x轴数据
  • 步骤3 准备 y 轴的数据
var yDataArr = [88, 92, 63, 75, 94, 80, 70, 86] 
  • 步骤4 准备 option , 将 series 中的 type 的值设置为: bar
  var option = {
        xAxis: {
          type: 'category',
          data: xDataArr,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '语文',
            type: 'bar',
            data: yDataArr,
          },
        ],
      }
  • 注意:
    • 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种:category 和 value ,
    • 如果 type属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现.
    • 如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

效果如图:

image-20201128214257855

需求:设置柱状图的最大最小值

  • 在series中设置markPoint
 var option = {
        xAxis: {
          type: 'category',
          data: xDataArr,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '语文',
            type: 'bar',
            markPoint: {
              // 标记点
              data: [
                {
                  type: 'max',
                  name: '最大值',
                },
                {
                  type: 'min',
                  name: '最小值',
                },
              ],
            },
            data: yDataArr,
          },
        ],
      }

效果:

image-20201128214636751

需求: 设置图标的平均值

  • 在series中设置markLine
var option = {
        xAxis: {
          type: 'category',
          data: xDataArr,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '语文',
            type: 'bar',
            markLine: {
              // 标记线
              data: [
                {
                  type: 'average',
                  name: '平均值',
                },
              ],
            },
            data: yDataArr,
          },
        ],
      }

效果

image-20201128215100362

需求: 设置柱状图的每个柱状图的值

  • 在series中设置label
 var option = {
        xAxis: {
          type: 'category',
          data: xDataArr,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '语文',
            type: 'bar',
            markLine: {
              // 标记线
              data: [
                {
                  type: 'average',
                  name: '平均值',
                },
              ],
            },
            label: {
              // 柱状图上的文字设置
              show: true, // 是否显示
              rotate: 60, // 旋转角度
              position: 'top', // 显示位置
            },
            // barWidth: '30%', // 柱的宽度
            data: yDataArr,
          },
        ],
      }

效果

image-20201128215335043

需求:横向柱状图

  • 所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可
var option = {
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: xDataArr,
        },
        series: [
          {
            name: '语文',
            type: 'bar',
            markPoint: {
              // 标记点
              data: [
                {
                  type: 'max',
                  name: '最大值',
                },
                {
                  type: 'min',
                  name: '最小值',
                },
              ],
            },
            markLine: {
              // 标记线
              data: [
                {
                  type: 'average',
                  name: '平均值',
                },
              ],
            },
            label: {
              // 柱状图上的文字设置
              show: true, // 是否显示
              rotate: 60, // 旋转角度
              position: 'top', // 显示位置
            },
            barWidth: '30%', // 柱的宽度
            data: yDataArr,
          },
        ],
      }

效果

image-20201128215716224

Echarts通用配置

设置图标的标题样式title

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      title: { // 标题设置
        text: '成绩展示', // 标题文字
        textStyle: { // 标题文字样式设置
          color: 'red'
        },
        link: 'http://www.baidu.com', // 标题超链接
        borderWidth: 5, // 标题边框宽度
        borderColor: 'blue', // 标题边框颜色
        borderRadius: 5, // 标题边框圆角
        left: 50, // 标题距离左边的距离
        top: 10 // 标题距离顶部的距离
      },
     
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

效果:

image-20201128221013591

设置提示框 tooltip

  • tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
tooltip: { // 工具提示
        // trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
        trigger: 'axis',
        triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过
        // formatter: '{b} 的成绩是 {c}'
        formatter: function(arg){ // 文字格式化
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },
  • formatter格式化配置
image-20201128221841175

效果如图

image-20201128221938095

配置图标的工具箱toolbox

  • 在option中设置toolbox
 var option = {
      title: {
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        left: 50,
        top: 10
      },
      tooltip: {
        // trigger: 'item'
        trigger: 'axis',
        triggerOn: 'click',
        // formatter: '{b} 的成绩是 {c}'
        formatter: function(arg){
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },
      toolbox: { // 工具箱按钮
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr
        }
      ]
    }

效果

image-20201128222353614

设置图例 legend

  • legend是图例,用于筛选类别,需要和series配合使用
  • legend中的data是一个数组
  • legend中data的值需要和series数组中某组数据的name一致
 var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
 var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
 var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]

var option = {
      title: {
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        left: 50,
        top: 10
      },
      tooltip: {
        // trigger: 'item'
        trigger: 'axis',
        triggerOn: 'click',
        // formatter: '{b} 的成绩是 {c}'
        formatter: function(arg){
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      },
      legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
        data: ['语文', '数学']
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr1
        },
        {
          name: '数学',
          type: 'bar',
          data: yDataArr2
        }
      ]
    }

效果:

image-20201128222820506
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容