西安制作网站公司,网站建设课设心得体会,设计公司logo公司文化,网站设置关键词点击右上方红色按钮关注“web秀”#xff0c;让你真正秀起来前言前面有文章#xff0c;讲述了Vue中封装Echarts组件#xff0c;但都是直接上代码#xff0c;没有具体对代码进行讲述。今天我们就来看看#xff0c;如何使Echarts图表更美观#xff0c;都是那部分属性使其更…点击右上方红色按钮关注“web秀”让你真正秀起来前言前面有文章讲述了Vue中封装Echarts组件但都是直接上代码没有具体对代码进行讲述。今天我们就来看看如何使Echarts图表更美观都是那部分属性使其更惊艳的。如何使你的Echarts图表更具有观赏性和实用性如何隐藏坐标轴Echarts中options对象有xAxis、yAxis参数可以控制是否显示坐标轴、坐标轴刻度标签、坐标轴轴线、坐标轴刻度、分割线等yAxis: { // y轴type: value,show: false, // 是否显示坐标轴data: [],axisLabel: { show: false }, // 坐标轴刻度标签axisLine: { show: false }, // 坐标轴轴线axisTick: { show: false }, // 坐标轴刻度splitLine: { show:false } // 分割线}如何使你的Echarts图表更具有观赏性和实用性柱形图如何设置柱子渐变和圆角主要通过itemStyle属性color来设置渐变barBorderRadius属性设置圆角遵循css左上、右上、右下、左下顺序。同时下方代码加了柱子数值label配置。barWidth是柱子宽度。series : [{type: bar,barWidth: 40, // 柱子宽度label: {show: true,position: top, // 位置color: #1CD8A8,fontSize: 14,fontWeight: bold, // 加粗distance: 20 // 距离}, // 柱子上方的数值itemStyle: {barBorderRadius: [20, 20, 0, 0],// 圆角(左上、右上、右下、左下)color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [#2FAEF2,#1CD8A8].map((color, offset) ({color, offset}))), // 渐变},data: [10, 52, 200, 334, 390, 330, 220]}]如何使你的Echarts图表更具有观赏性和实用性柱形图柱子阴影从上方series可以看出接收的数组类型的。所以我们在加一个同样的type不过数据我们在每个值上100做成阴影即可。var data [10, 52, 200, 334, 390, 330, 220];...series : [{ // 阴影柱形type: bar,barWidth: 40,itemStyle: {color: rgba(167,167,167,0.2),barBorderRadius: [20, 20, 0, 0]},barGap:-100%,data: data.map(item{return item100}),},...柱形图添加折线同上方一样我们还可以再在series里面添加line同时可以设置折线颜色(lineStyle)折线线条区域颜色(areaStyle)等都是可以通过new echarts.graphic.LinearGradient()来设置渐变。series: [......{type:line,smooth: true, // 线条转折有弧度symbol: circle, // 数值点类型(circle, rectangle, triangle, diamond, emptyCircle, emptyRectangle, emptyTriangle, emptyDiamond)showSymbol: true,symbolSize: 8, // 数值点的大小itemStyle: {color: [#1CD8A8]},// 数值点的颜色lineStyle: {width: 2,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: #2FAEF2},{offset: 1, color: #1CD8A8}])}, // 线条渐变areaStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: rgba(47,174,242,0)},{offset: 0.5, color: rgba(34,202,192,0.04)},{offset: 1, color: rgba(28,216,168,0.52)}])}, // 线条区域渐变data: data, // 折线图的渲染数据}]如何使你的Echarts图表更具有观赏性和实用性数据格式这个也是非常简单只需要在需要格式化的地方加上formatter方法即可对数据进行格式化。series: [......{type: bar,barWidth: 12,label: {show: true,position: top,formatter: (params) {return params.value 万;},color: #1CD8A8,fontSize: 14,fontWeight: bold,distance: 25},...},如何使你的Echarts图表更具有观赏性和实用性多数据图表可缩放在options下可以添加dataZoom来控制默认展示位置等。...dataZoom: [{show: true, // 是否显示滚动图依然可以滚动缩放realtime: true,start: 0, // 默认起始位置end: 55 // 默认终点位置}, {type: inside,realtime: true,start: 45,end: 85}],如何使你的Echarts图表更具有观赏性和实用性图例legend详细参数可以定义图例的位置布局颜色等。...legend: {right: 68, //图例组件离右边的距离orient : vertical, //布局 纵向布局width: 40, //图行例组件的宽度,默认自适应x : left, //图例显示在右边itemWidth:10, //图例标记的图形宽度itemHeight:10, //图例标记的图形高度data:[直接访问,邮件营销,联盟广告,视频广告,web秀],textStyle:{ //图例文字的样式color:#333,fontSize:12}}如何使你的Echarts图表更具有观赏性和实用性视图里面加阴影提示tooltip提示框组件show默认true是否显示提示框组件trigger触发类型item、axis、none当为none的时候代表什么都不触发就不会显示提示框axisPointer坐标轴指示器配置项实际上坐标轴指示器的全部功能都可以通过轴上的 axisPointer 配置项完成。axisPointer的type类型1、line 直线指示器2、shadow 阴影指示器3、none 无指示器4、cross 十字准星指示器。其实是种简写表示启用两个正交的轴的 axisPointer。label属性加formatter函数可以格式化提示框显示内容...tooltip: {trigger: axis,axisPointer: {type: shadow,label:{formatter: function (params) {return 星期 params.value;}}}}如何使你的Echarts图表更具有观赏性和实用性总结总的来讲颜色搭配是具有观赏性的主要因素。同时精简不需要的组件和功能能够一目了然看懂的图表不要添加无用的元素说明信息。这样反而让用户看不懂不知道图表要表达什么主题了。公告为了感谢大家一直以来的支持小编发起了抽奖活动大家可以去参与转发抽奖活动和关注小编即可参与抽出5名小伙伴每人20元话费奖励。再次感谢大家的支持。
