Echarts实战案例代码（象形图与dataZoom组件实现大事记进度图）

数据API

let xdata = ['2019-06-12', '2019-09-15', '2020-01-10', '2020-03-05', '2020-04-12', '2020-05-18', '2020-06-12', '2020-07-07'], data = [120, 90, 10, 80, 90, 20, 56, 150], infoData = ['漏刻有时发布', '数据分析系统', '磐安旅游签到', '物联网停车场', '刷脸支付大屏', '扎根版开发', '百度地图开发', '智慧城市3D开发']; 

核心代码

option = { backgroundColor: '#060f20', grid: { top: '15%', right: '3%', left: '8%', bottom: '16%' }, xAxis: [{ type: 'category', color: '#cef7fd', data: xdata, axisPointer: { type: 'line' }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#eaeae8' } }, axisLabel: { margin: 20, color: '#cef6fe', textStyle: { color: "#cbf7ff", fontSize: 14, fontWeight: 200 } }, }], yAxis: [{ type: 'value', color: '#cef7fd', axisLine: { lineStyle: { color: '#eaeae8' }, }, axisTick: { show: false }, axisLabel: {//Y轴标签定性化 formatter: function(value) { var texts = []; if (value == 30) { texts.push('超低'); } else if (value == 60) { texts.push('低'); } else if (value == 90) { texts.push('中'); } else if (value == 120) { texts.push('高'); } else if (value == 150) { texts.push('超高'); } return texts; }, textStyle: { color: "#cbf7ff", fontSize: 14, fontWeight: 200 } }, splitLine: { lineStyle: { color: '#272456' } } }], dataZoom: [{ show: true, height: 20, xAxisIndex: [0], bottom: 50, "start": 20, "end": 150, handleSize: '120%', handleStyle: { color: "#00b4ff", }, textStyle: { color: "#cef6fe", }, fillerColor: "rgba(40,82,106,0.8)", borderColor: "rgba(49,65,80,0.5)", }, { type: "inside", show: true, height: 15, width: 20, start: 1, end: 35 }], series: [{ type: 'pictorialBar', data: data, barWidth: 8, symbol: 'path://d="M150 130 L130 50 L170 50 Z"', itemStyle: { normal: { color: { //图形颜色 type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#4fa5e2' // 0% 处的颜色 }, { offset: 1, color: '#c2bc1c' // 100% 处的颜色 }], global: false // 缺省为 false }, barBorderRadius: [30, 30, 0, 0], shadowColor: 'rgba(0,255,225,1)', shadowBlur: 4, } }, label: { normal: { show: true, lineHeight: 20, width: 100, height: 40, padding: 5, backgroundColor: '#fff', borderRadius: 5, position: 'top', align: 'center', formatter: function(params) { console.log(params); return params.name + "\n" + infoData[params.dataIndex]; }, rich: { b: { color: '#999', lineHeight: 22, align: 'center' }, } }, } }] } 

LOCKDATAV DONE！

本文地址：http://www.51sjk.com/Upload/Articles/1/0/259/259373_20210701001121363.jpg