Echarts 柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入echarts.js文件 --> <script src="lib/echarts.min.js"></script> </head> <body> <!-- 2.呈现图表的盒子 --> <div style="width:600px;height: 400px;"></div> <script> // 3.初始化echarts实例对象 // 参数,dom,决定图表最终呈现的位置 var mCharts = echarts.init(document.querySelector('div')) // 4.准备配置项 var option = { // 标题 title: { text: '成绩', link: 'http://www.baidu.com', textStyle: { color: 'red', }, // 标题边框 borderWidth: 5, borderColor: 'blue', borderRadius: 5, // 标题位置 left: 10, top: 10 }, //X轴是category竖向数据,Y轴是category横向数据 // x轴 xAxis: { type: 'category', data: ["小明", "小红", "小王", "小绿", "小黑", "小白"] }, // y轴 yAxis: { type: 'value', }, //表头数据筛选 legend:{ data:['语文','数学'] }, // 轴数据 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: [70, 92, 87, 40, 99, 88] }, { name: '数学', // 柱状图 type: 'bar', data: [80, 82, 97, 80, 79, 38] }], // 鼠标移入出发提示 tooltip: { // 触发位置 trigger // trigger:'item', trigger: 'axis', // 触发方式 // triggerOn:'click', // 提示内容 //{a}系列名称{b}类目值{c}数值 // formatter:'{b}的{a}成绩是{c}' //函数形式 formatter: function (arg) { return arg[0].name + '的' + arg[0].seriesName + '成绩是:' + arg[0].data } }, toolbox: { feature: { //导出图片 saveAsImage: {}, //切换原始数据视图或修改数据 dataVuew: {}, //重置还原数据 restore: {}, //区域缩放 dataZoom: {}, magicType: { type: ['bar'] } } } } // 5.将配置项设置给echarts实例对象 mCharts.setOption(option) </script> </body> </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」