echarts |
您所在的位置：网站首页 › echart柱状图渐变色 › echarts |
echarts
|
这是我参与更文挑战的第1天，活动详情查看 更文挑战 echart柱状图各部分分析详细配置在最后【图表基本配置项和数据】部分 主要属性series > barWidth： barWidth: 20 //设置柱状图大小 echarts设置柱状图【颜色渐变】主要属性series > itemStyle > normal > color： series: [{ //设置柱状图渐变颜色 itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#1268f3" // 0% 处的颜色 }, { offset: 0.6, color: "#08a4fa" // 60% 处的颜色 }, { offset: 1, color: "#01ccfe" // 100% 处的颜色 }], false) } }, }] vue版—echarts设置柱状图【颜色渐变】 如何在vue中使用echarts图表2021-09-14新增 安装依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry= cnpm install echarts -S在vue文件中引入 let echarts = require('echarts')初始化图表 echarts.init(document.getElementById('myChart'))完整代码地址👉在vue中使用eachart示例文件 点击【编辑源码】可以查看完整vue文件（不支持在线运行） 主要属性series > itemStyle > normal > label： series: [{ itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 16 } } } }, }] echarts 柱状图设置【不同的颜色】，并且自动循环已有颜色；主要属性series > itemStyle > normal > label： 按数组顺序显示颜色，如果柱体数量大于颜色数量，则循环已有颜色 itemStyle: { normal: { //这里是重点 color: function(params) { var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; // var colorList = ['#c23531','#2f4554', '#61a0a8']; // 自动循环已经有的颜色 return colorList[params.dataIndex % colorList.length]; } } } echart图表基本配置项和数据 标题title title: { text: '柱状图示例', textStyle:{ //---主标题内容样式 color:'#000', }, subtext:'作者：Axjy', subtextStyle:{//---副标题内容样式 color:'#bbb' }, padding:[10,0,0,0]//---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位 }, 图例legend问题：配置了图例，但是不显示? 检查配置中的legend的属性 data和另一个属性 series数组中的 name属性是否一致 legend: { type:'plain',//----图例类型，默认为'plain'，当图例很多时可使用'scroll' top:'1%',//----图例相对容器位置,top\bottom\left\right textStyle:{ //----图例内容样式 color:'#000', //---所有图例的字体颜色 //backgroundColor:'black', //---所有图例的字体背景色 }, data: [//----图例内容 { name:'销量', icon:'roundRect',//----图例的外框样式'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' textStyle:{ color:'#000', //----单独设置某一个图例的颜色 //backgroundColor:'black',//---单独设置某一个图例的字体背景色 } } ] }, grid区域 grid:{ show:false, //---是否显示直角坐标系网格 top:80, //---相对位置，top\bottom\left\right tooltip:{ //---鼠标焦点放在图形上，产生的提示框 show:true, trigger:'item', //---触发类型 textStyle:{ //---提示框样式 color:'#fff', }, } }, x轴和y轴属性基本相同 xAxis(yAxis): { show:true, //---是否显示 name:'月份', //---轴名称 position:'bottom', //---x轴位置'top','bottom' offset:15, //---x轴相对于默认位置的偏移 nameLocation:'start', //---轴名称相对位置'start','center','end' nameTextStyle:{ //---坐标轴名称样式 color:"#000", padding:[5,0,0,-5], //---坐标轴名称相对位置 }, nameGap:15, //---坐标轴名称与轴线之间的距离 nameRotate:0, //---坐标轴名字旋转 data: ['1月', '2月', '3月', '4月', '5月','6月', '7月'], }, 坐标轴 轴线xAxis>axisLine 或 yAxis>axisLine axisLine:{//---坐标轴 轴线 show:true, //---是否显示 //------------------- 箭头 ------------------------- symbol:['none', 'arrow'], //---是否显示轴线箭头 symbolSize:[8, 8] ,//---箭头大小 symbolOffset:[0,7], //---箭头位置 //------------------- 线 ------------------------- lineStyle:{ color:'#000', width:1, type:'solid', }, }, 坐标轴 刻度xAxis>axisTick 或 yAxis>axisTick axisTick:{//---坐标轴 刻度 show:true,//---是否显示 inside:false,//---是否朝内 lengt:3,//---长度 lineStyle:{ //color:'red',//---默认取轴线的颜色 width:1, type:'solid', }, }, 坐标轴 标签xAxis>axisLabel 或 yAxis>axisLabel axisLabel:{//---坐标轴 标签 show:true,//---是否显示 inside:false,//---是否朝内 rotate:10,//---旋转角度 margin: 8,//---刻度标签与轴线之间的距离 //color:'red', //---默认取轴线的颜色 }, grid 区域中的分隔线xAxis>splitLine 或 yAxis>splitLine splitLine:{//---grid 区域中的分隔线(一般y轴的显示，x轴的不显示) show:false,//---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的 lineStyle:{ color:'#666', width:1, type:'dashed',//---类型'solid'，'dashed'，'dotted' }, },参考资料： Echart Demo集 🎨【点赞】【关注】不迷路，更多前端干货等你解锁 往期推荐 👉 产品、技术、设计等各互联网领域的「基础术语」扫盲 👉 Web安全的防御手段都在这里了！ 👉 JavaScript的7大类型补缺补漏！ 👉 JavaScript深拷贝和浅拷贝看这篇就够了！ |
【本文地址】
今日新闻 |
推荐新闻 |