Smartchart提供很多通用的图形, 如果要个性化需要你进行自定义, 比如你可能需要在同一个图上展示柱形图和线性图, 那么今天我们就以这个为例, 以后大家可以借鉴
首先我们在ECHART官网可能找一个你喜观的图形, 如下简单柱形图链接:
打开我们可以看对应的option:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
我们之前有介绍过 数据集的使用 , 接下来我们就进行下改造, 请注意对比, 你只需照着复制即可
var dataset = __dataset__ //传入dataset
legend_label = ds_rowname(dataset) //可选, 自动获取legend
xlabel = dataset[0].splice(1) //x轴的标签列
dataset = ds_createMap(dataset) //转化成KV格式
//初始化series
var series=[];
series.push({
data: dataset[legend_label[0]], //对应的第一个图列
type: 'bar'
});
series.push({
data: dataset[legend_label[1]], //对应的第二个图列
type: 'line'
});
option__name__ = {
xAxis: {
type: 'category',
data: xlabel //X轴的标签
},
yAxis: {
type: 'value'
},
series:series,
};
charts.push(myChart__name__);
这样一个柱形+线性图就出来了
当然一个图形还有很多其它的元素, 比如标题, legend, 等等 大家可以参考以下进一步的代码 你可以进行在线调试图形在线调试
var dataset = __dataset__ //传入dataset
legend_label = ['R2','R1'] //legend_label的顺序可以指定, 已知系列名
//legend_label = ds_rowname(dataset) //可选, 自动获取legend
xlabel = dataset[0].slice(1) //x轴的标签列
dataset = ds_createMap(dataset) //转化成KV格式
//初始化series
var series=[];
series.push({
data: dataset[legend_label[0]], //对应的第一个图列
type: 'bar'
});
series.push({
data: dataset[legend_label[1]], //对应的第二个图列
type: 'line'
});
option__name__ = {
title: {
text: '自定义图示例',
left: 'center'
}, //定义标题的显示
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}' //鼠标移动提示的格式
},
legend: {
left: 'left',
data: legend_label
}, //定义图例的显示
xAxis: {
type: 'category',
data: xlabel
}, //定义X轴的显示
yAxis: {
type: 'value'
},
//图例定义
series:series,
};
charts.push(myChart__name__);
//关于自动化series, 可以参考以下代码
var series =[];
for (var i=1;i<dataset[0].length;i++){
series.push({type: 'bar'})
}
是不是非常简单, 更多option的配置项, 请参考 smartchart图形样式
你也以参考从echarts转化为smartchart的教程视屏教程