绘制柱状图及配置
引入echarts文件
<script src="/lib/echarts.min.js"></script>
给echarts定义一个有宽高的容器
<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div></body>
3.基于定义好的容器，初始化echarts实例
let mEcharts = echarts.init(document.querySelector('main'))
图表的配置项及数据
// echarts配置let option = {// 图表的标题title: {text: '成绩表',textStyle: {color: 'red'},// 标题的位置top: '0px',left: '10px',// 标题的边框及样式borderWidth: 1,borderColor: 'gray',borderRadius: 3},// 提示框组件tooltip: {// 触发的类型：1.item数据项图形中进行触发，2.axis坐标轴进行触发trigger: 'axis',// 触发的条件：1.mousemove鼠标移动时触发，2.click鼠标点击时触发triggerOn: 'click',// 提示框内容容器，展示图形的一些内容，具体配置请参考官网：/zh/option.html#tooltip.formatterformatter: '{b}的{a}成绩是{c}',formatter: function(age) {return age[0].name + '的' + age[0].seriesName + '成绩是' + age[0].value + '<br />' +age[1].name + '的' + age[1].seriesName + '成绩是' + age[1].value}},// 工具栏toolbox: {// 各个工具栏的配置feature: {// 把图形保存为图片saveAsImage: {},// 配置项还原到初始状态restore: {},// 数据区域的缩放dataZoom: {},// 数据视图的工具，可以查看图表中的数据以及编辑动态更新数据dataView: {},// 图形类型的动态切换magicType: {type: ['bar', 'line']}}},// 图例组件，可以展示不同系列的标记，颜色及名字，点击图例控制哪些系列不展示legend: {type: 'plain',//系列的名称，与series中的系列名称name同步data: ['语文', '数学'],left: '100px'},// 直角坐标系X轴的数据xAxis: {data: ['小明', '小樱', '小颖', '小英', '小红', '小翠']},// 直角坐标系Y轴的数据，类型默认value数值轴可以不写，数据可以写在series中yAxis: {},// 系列组件series: [{// 系列名称name: '语文',// 图形的类型type: 'bar',// Y轴的数据data: ['90', '88', '94', '84', '76', '65'],// 图形上的文本标签，可以用来说明图形的数据信息label: {show: true,// 标签旋转，正值逆时针rotate: 60},// 最大值组件markPoint: {data: [{name: '最大值',type: 'max'},{name: '最小值',type: 'min'}]},// 平均值组件markLine: {data: [{name: '平均值',type: 'average'}]}},{name: '数学',data: ['66', '75', '98', '88', '82', '56'],type: 'bar',label: {show: true}}]}// 使用刚指定的配置项及数据mEcharts.setOption(option)
最终展示效果：
