简介

项目开发中，通常中后台管理系统会用到可视化做出好看的界面，这里就记录一点echarts的知识点，希望能帮到优秀的你，如有错误，也欢迎指正~ 本项目测试的echarts版本为当前（2024.03.18）最新的echarts.min@5.5.0.js，我会给一个开源的代码仓库，如有想要拉取代码的可自行获取

一、开始上手

1.1 先绘制一个简单的柱状图出来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 步骤1 引入 -->
		<script src="lib/echarts.min@5.5.0.js"></script>
	</head>
	<body>
		<!-- 步骤2：准备一个呈现图表的盒子 -->
		<div style="width: 560px;height: 400px"></div>
	</body>
	<script>
		// 步骤3：初始化echarts实例对象
		var mCharts = echarts.init(document.querySelector('div'))
		// 步骤4：准备配置项
		var option = {
			
		// xAxis 直角坐标系中的 x轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现
		  xAxis: {
		    type: 'category',
		    data: ['李星云', '姬如雪', '张子凡']
		  },
		// yAxis 直角坐标系中的 y轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制
		  yAxis: {
		    type: 'value'
		  },
		// series 系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
		  series: [
		    {
		      name: '语文',
		      type: 'bar',
		      data: [88, 75, 92]
		    }
		  ]
		}
		// 步骤5：将配置项设置给echarts实例对象
		mCharts.setOption(option)
	</script>
</html>

按如上步骤，即可运行出简单的效果来。 xAxis 直角坐标系中的 x轴；yAxis 直角坐标系中的 y轴。

1.2 然后我们给柱状图加点效果

在series[{给每一项添加配置}]中的每一个对象中添加属性，这里我们添加

markPoint 标记: 最大值\最小值
markLine 平均值
label 数值显示
barWidth 柱的宽度

series: [{
    name: '语文',
    type: 'bar',
    data: [88, 75, 92],
    // 3.1.2.柱状图的常见效果
    // 1 标记: 最大值\最小值 markPoint
    markPoint: {
        data: [{
                type: 'max',
                name: '最大值'
            },
            {
                type: 'min',
                name: '最小值'
            }
        ]
    },
    // 2 平均值 markLine
    markLine: {
        data: [{
                type: 'average',
                name: '平均值'
        }]
    },
    // 3 数值显示 label
    label: {
        show: true, // 是否可见
        rotate: 60 // 旋转角度
    },
    // 4 柱的宽度 barWidth
    barWidth: '30%' // 柱的宽度

}]

二、echarts的通用配置项

2.1 标题: title

var option = {
    title: { // 标题设置
      text: '成绩展示', // 标题文字
      textStyle: { // 标题文字样式设置
        color: '#55aa7f'
      },
      borderWidth: 5, // 标题边框宽度
      borderColor: 'pink', // 标题边框颜色
      borderRadius: 10, // 标题边框圆角
      left: 30, // 标题距离左边的距离
      top: 10 // 标题距离顶部的距离
    },

    // xAxis 直角坐标系中的 x轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现
   xAxis: {
     type: 'category',
     data: ['李星云', '姬如雪', '张子凡']
   },
   ......
}

2.2 提示框 tooltip：当鼠标移入到图表或者点击图表时, 展示出的提示框

var option = {
   // 1 标题: title
    title: { // 标题设置
        text: '成绩展示', // 标题文字
        textStyle: { // 标题文字样式设置
                color: '#55aa7f'
        },
        borderWidth: 5, // 标题边框宽度
        borderColor: 'pink', // 标题边框颜色
        borderRadius: 10, // 标题边框圆角
        left: 30, // 标题距离左边的距离
        top: 10 // 标题距离顶部的距离
    },

    // 2 提示框: tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove', // 触发时机, click代表点击, mousemove代表鼠标移过
        // formatter: '{a}--{b}:{c}'
        formatter: function(arg) {
            console.log('提示框：', arg);
            return arg.name + '的' + arg.seriesName + ':' + arg.data
        }
    },
    .....其他
}

formatter回调函数里打印可以看到一些参数，随你项目可取出你需要展示的值哦

2.3 工具按钮: toolbox

    // 3 工具按钮: toolbox
    toolbox: {
        feature: {
            saveAsImage: {}, // 将图表保存为图片
            dataView: {}, // 是否显示出原始数据
            restore: {}, // 还原图表
            dataZoom: {}, // 数据缩放
            magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
                type: ['bar', 'line']
            }
        }
    },

2.4 图例: legend

用于筛选类别,需要和 series 配合使用。

legend 中的 data 是一个数组；
legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致。

    legend: {
        // 注意这里数组的值要和下面series数组里每一个对象的name字段对应才行
        data: ['语文', '数学']  
    },
    series: [
        {
            name: '语文',
            ....这一项是语文的数据
        },
        // 再加一项数学的
        {
         name: '数学',
         ......
        }
    ]

点击进行筛选

echarts从入门到熟悉

简介