<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="echarts.min.js"></script> </head> <body> <div id="a" style=" 500px; height: 500px;"></div> </body> <script> //绑定div var myChart = echarts.init(document.getElementById('a')) var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放']; var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; // var yMax = 500; // var dataShadow = []; //这个第二条柱子合并产生阴影，循环的是上面定义的变量然后根据数据多少来给下面阴影加数据 // for (var i = 0; i < data.length; i++) { // dataShadow.push(yMax); // } option = { // 标题 title: { // 主标题 text: '接警日趋势（近7天）', //主标题内容样式 textStyle:{ color:'#000' }, // 副标题 subtext: '', // 副标题内容样式 subtextStyle:{ color:'#bbb' }, //标题位置,因为图形是是放在一个dom中,因此用padding属性来定位 padding:[10,0,0,30] }, // 鼠标放上显示提示 tooltip: { trigger: 'axis', //触发类型 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用，'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 axisPointer: { //坐标轴指示器，坐标轴触发有效 type: 'cross', //默认为直线，可选line shadow cross crossStyle: { color: '#fff' } } }, // x轴 xAxis: { show:true, data: dataAxis, axisPointer: { //写到X轴就是给X轴改的鼠标放上后的样式 type: 'shadow', }, // 坐标轴标签 axisLabel: { inside: true, textStyle: { color: '#fff' } }, //X坐标刻度 axisTick: { show: false, //坐标轴线是否显示 inside:true, //坐标轴线是否朝内 }, //X坐标标签 就是文字 axisLabel:{ show:true, //坐标标签是否显示 inside:false, //坐标标签是否朝内 }, //grid 区域中的分隔线 axisLine: { show: false }, // 网格区域 splitArea:{ show:false }, data: ["1月","2月","3月","4月","5月","6月","7月"], z: 10 }, // y轴 yAxis: { show:false, //是否显示 position:'right', //显示位置 offset:0, //y轴相对于默认位置的偏移 type:'value', //轴的类型 name:'销量', //轴的名称 nameLocation:'end', // 坐标名称的样式 颜色 内边距 字体大小等 nameTextStyle:{ color:"#000", padding:[5,0,0,10], }, nameGap:20, //坐标名称和轴线的距离 // nameRotate:270, //坐标名字的旋转 // 坐标轴 轴线 axisLine: { show: true, // 箭头 symbol:['none','arrow'], //['none','arrow']这是只在末端显示箭头，'arrow'两端都显示箭头 'none'就是不显示 symbolSize:[8, 8] , //---箭头大小 symbolOffset:[0,7], //---箭头位置 //线 lineStyle:{ color:'green', //线的颜色 1, //线的宽度 type:'solide' //显得类型 } }, //坐标轴 刻度 就是纵向多出来的小线 axisTick: { show: true, inside:false, //---是否朝内 lengt:3, //长度 lineStyle:{ //color:'red', //---默认取轴线的颜色 1, type:'solid', }, }, //坐标轴标签 坐标轴显示的数值 axisLabel: { show:true, //---是否显示 inside:false, //---是否朝内 rotate:0, //---旋转角度 margin: 8, //---刻度标签与轴线之间的距离 textStyle: { color: '#999' } }, //--网格区域 splitArea:{ show:false, //---是否显示，默认false }, }, // 数据区域的缩放 dataZoom: [ { type: 'inside' } ], //内容数据 series: [ { // name:'销量', //系列名称 跟图例相对应 也就是那个带颜色的小图标 type: 'bar', // 生成的一条柱子来产生阴影 // itemStyle: { // color: 'rgba(0,0,0,0.05)' // }, // barGap: '-100%', // barCategoryGap: '40%', // data: dataShadow, // animation: false }, { type: 'bar', // 图形形状 itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ // 柱子0%的颜色 {offset: 0, color: '#01F4D4'}, //柱子50%的颜色 {offset: 0.5, color: '#02E2E8'}, //柱子100%的颜色 {offset: 1, color: '#02D2F9'} ] ) }, //鼠标放到柱子上的样式 emphasis: { itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#2378f7'}, {offset: 0.7, color: '#2378f7'}, {offset: 1, color: '#83bff6'} ] ) } }, barWidth:'30', //调节柱子的宽度 barCategoryGap:'30%', //调节柱子之间的距离 data: [3020, 4800, 3600, 6050, 4320, 6200,5050] } ] }; // Enable data zoom when user click bar. var zoomSize = 6; myChart.on('click', function (params) { console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); myChart.dispatchAction({ type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] }); }); //实例化显示图表 myChart.setOption(option) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./echarts.min.js"></script> </head> <body> <div id="a" style=" 500px; height: 500px;"></div> </body> <script> var myChart = echarts.init(document.getElementById('a')) option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { type:'plain', right:'0%', data: ['直接访问', '邮件营销', '联盟广告'], }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['4月', '5月', '6月', '7月', '8月', '9月'], axisTick: { show: false }, }, yAxis: { show:false, type: 'value', }, series: [ { name: '直接访问', type: 'bar', stack: '总量', label: { show: true, position: 'insideRight' }, itemStyle: { color: '#00B7EE', }, data: [320, 302, 301, 334, 390, 330] }, { name: '邮件营销', type: 'bar', stack: '总量', label: { show: true, position: 'insideRight' }, itemStyle: { color: '#5AFFAE', }, data: [120, 132, 101, 134, 90, 230] }, { name: '联盟广告', type: 'bar', stack: '总量', label: { show: true, position: 'insideRight' }, itemStyle: { color: '#fff100', }, data: [220, 182, 191, 234, 290, 330] }, ] }; myChart.setOption(option) window.onresize=function(){ myChart.resize() } </script> </html>