...
代码块 | ||
---|---|---|
| ||
function main(chartView) { var chart = chartView.getChartObject(); var option = chart.getOptions(); var data = []; var series = option.series; // 新版本去掉 option.chartex = { timelineFieldIndex: 3 }; if (!option.chartex || !option.chartex.timelineFieldIndex) { return; } for (var i in series) { var seriesItem = series[i]; data = seriesItem.data; delete seriesItem.data; //初始option中去掉data数据,拼在独立的options中。 } var timelineData = [], chartData = chartView.getGridData().data, //所有表格数据 oldValue = "", dataSlice = []; //拆分数据的位置 for (var i = 0; i < chartData.length; i++) { var row = chartData[i]; // 获取时间轴的数据 var cellValue = row[option.chartex.timelineFieldIndex].value; if (oldValue != cellValue) { timelineData.push(cellValue); dataSlice.push(i); oldValue = cellValue; } } // timeline组件配置,参考文档 option.timeline = { data: timelineData, ////timeline 组件数据,动态数据的时间显示 axisType: 'category', orient: 'vertical', autoPlay: true, inverse: true, playInterval: 100, left: null, right: 0, top: 20, bottom: 20, width: 55, height: null, symbol: 'none', controlStyle: { showNextBtn: false, showPrevBtn: false, normal: { color: '#666', borderColor: '#666' } } }; option.grid = { right: '110' //空出位置显示timeline组件 }; //设置标题 option.title = { text: timelineData[0] + '', textAlign: 'center', left: '63%', top: '55%', textStyle: { fontSize: 60 } }; // color: 'rgba(255, 255, 255, 0.7)' var itemStyle = { normal: { opacity: 0.8, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(25, 0, 0, 0.5)' } }; // 以下为重新拼timeline动态数据,每个时间对应数据为数组中的一个对象 var newdata = data; var dataOptions = []; for (i = 1; i < dataSlice.length; i++) { var data1 = newdata.slice(dataSlice[i - 1], dataSlice[i]); dataOptions.push({ series: { data: data1, itemStyle: itemStyle, symbolSize: function(val) { var x = val[2]; var y = Math.sqrt(x / 5e8) + 0.1; return y * 40; } }, title: { show: true, text: timelineData[i - 1] + '' } }); if (i == dataSlice.length - 1) { data1 = newdata.slice(dataSlice[i]); dataOptions.push({ series: { data: data1, itemStyle: itemStyle, symbolSize: function(val) { var x = val[2]; var y = Math.sqrt(x / 5e8) + 0.1; return y * 40; } }, title: { show: true, text: timelineData[i] + '' } }); } } //重新设置属性 var newOptions = { baseOption: option, options: dataOptions }; //修改visualMap,控制指标颜色,根据显示名称染色 var visualMapCategories = []; for (var i = 0; i < data1.length; i++) { var name = data1[i].value[3]; visualMapCategories.push(name); } // visualMapCategories = ["China","United States","United Kingdom","Russia", // "India","France","Germany","Australia","Canada","Cuba","Finland","Iceland","Japan", // "North Korea","South Korea","New Zealand","Norway","Poland","Turkey"]; var visualMap2 = { show: false, dimension: 3, categories: visualMapCategories, calculable: true, precision: 0.2, inRange: { color: [ '#dd4444', '#fec42c', '#80F1BE','#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'] } }; option.visualMap = visualMap2; chart.setOptions(newOptions); } |
注:假设用户数据返回的visualMap属性是数组,则对于重置visualMap属性,则需要替换成以下方式:
代码块 |
---|
var visualMap2 = [{
show: false,
min: 8,
max: 1532696,
dimension: 2,
calculable: true,
precision: 0.01,
inRange: {
color: ['#dd4444', '#fec42c', '#80F1BE', '#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'],
symbolSize: [10, 50]
}
}]; |
此文档更新于2017-10-24。更新者:张雪琼。
...