最近几个项目都是有关图表,在国内echart和国外highchart比较,还是比较倾向于使用echart做可视化,echart是完全开源,配置项文档非常详细。
创建html文档,设置好DOM,给节点设置width和height
引入echart.min.js文件
配置echarts和折线图
(1)require.config是用来设置echarts的配置文件,配置好本地echarts文件路径。(2)关于第二个require,这里是用来设置要表。除了第一个‘echarts’必要引用外,还要引用所需要显示的图。例如,我们这个表用到的是柱状图,所以要引用bar,那么如果我们要引用折线图,那么就要引用line了,依次类推,具体可以看官方文档。
对获取得到的id进行echarts初始化
重点是option里的设置,设置坐标轴、设置数据。
数据显示有断开,在series中label加上formatter方法
y轴上的超过1000,显示千。在axisLabel中增加formatter方法
var options = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
bottom:'20',
data: ['2的指数', '3的指数','1/2的指数']
},
xAxis: {
splitLine: {show: false},
axisLabel:{
color:'#333',
fontSize:12,
},
axisTick:{
show:false
},
data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
},
grid: {
x:0,
x2:0,
y:20,
y2:0,
bottom: '25%',
containLabel: true
},
yAxis: {
type: 'value',
axisLabel:{
color:'#333',
fontSize:12,
formatter: function(val){
return calc(val)
}
},
axisTick:{
show:false
},
splitLine:{show:true}
},
series: [
{
name: '3的指数',
type: 'line',
label:{
formatter:function(params){
if (params.value > 0) {
return params.value
}else{
return '';
}
}
},
data: [1, 3, 9, 27, 81, 247, 741, , 6669]
},
{
name: '2的指数',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: '1/2的指数',
type: 'line',
data: [2, 4, 8, 16, 32, 64, 128, 256, 512]
}
]
};
platLineData.setOption(options);
最终可视化
扫描二维码关注公众号,回复:
1944669 查看本文章