Echarts 象形图

2018年5月15日

var walk = 'image://../images/health_walk.png'; var dom = document.getElementById("recoveryChart"); var myChart = echarts.init(dom); var app = {}; option = null; option = { tooltip: { trigger: 'axis', formatter: '{b}<br />{a1}:{c1}' }, legend: { show: true, data: ['改善目标'], textStyle: { color: '#000' }, left: 38 }, grid: { top: 60, left: 8, containLabel: true, }, color: ['#0f0', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'], xAxis: { type: 'category', boundaryGap: false, interval: 1, data: [0, '第2周', '第4周', '第6周', '第8周', '第10周', '第12周'], splitLine: { show: false, lineStyle: { type: 'solid', color: '#000', }, interval: 0 }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#000' }, }, }, yAxis: { name: '公斤', type: 'value', nameGap: 6, splitLine: { show: false, lineStyle: { color: '#000' } }, axisLine: { //坐标轴线设置 lineStyle: { color: '#000' } }, axisTick: { //坐标轴刻度设置 show: false }, nameTextStyle: { color: '#000' }, axisLabel: { //坐标轴刻度标签设置 color: '#000' }, splitArea: { //分隔区域样式设置 show: false, areaStyle: { color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], }, }, }, series: [{ type: 'pictorialBar', symbol: walk, symbolSize: [15, 23], z: 10, data: [{ value: 88, symbolPosition: 'end', symbolOffset: [15,-23] },{ },{ },{ },{ },{ },{ value: 71, symbolPosition: 'end', symbolOffset: [-15, -23] }] },{ name: '改善目标', type: 'line', step: 'middle', lineStyle: { normal: { color: '#ff9743', }, }, itemStyle: { normal: { color: '#ff9743' } }, data: [88, 86, 83.5, 81, 76.9, 73, 71] }] }; if(option && typeof option === "object") { myChart.setOption(option, true); }