先上效果图:
以下为 echarts 代码,其实 echarts 本质上是 js,所以如果会 js 代码的同学会上手更快
option = {
title: {
text: '数值变化',
textStyle:{
//文字颜色
// color:'#ccc',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize:36
},
left:'center'
},
//用formatter回调函数显示多项数据内容
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
var valMap = {};
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
//过滤无效值
if(value == '-'){
continue;
}
//过滤重叠值
if(valMap[seriesName] == value){
continue;
}
if(i===0){
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
//为了保证和原来的效果一样,这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
//圆点后面显示的文本
htmlStr += seriesName + ':' + value;
htmlStr += '</div>';
valMap[seriesName] = value;
}
return htmlStr;
}
},
legend: {
// y:'55%',
textStyle:{
fontSize: 26,//字体大小
color:' #EE8262'//字体颜色
},
data:['调整前','调整后'],
left:'right',
},
grid: {
left: '3%',
right: '4%',
bottom: '40%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
axisLabel: {
show: true, //这行代码控制着坐标轴x轴的文字是否显示
textStyle: {
// color: '#fff', //x轴上的字体颜色
fontSize:'24' // x轴字体大小
}
},
boundaryGap: false,
data: ['8','9','10','11','12','13','14','15','16','17','18']
},
yAxis: {
type: 'value',
axisLabel: {
show: true, //这行代码控制着坐标轴x轴的文字是否显示
textStyle: {
// color: '#fff', //x轴上的字体颜色
fontSize:'24' // x轴字体大小
}
},
min : 0.6,
},
series: [
{
name:'调整前',
itemStyle:{
normal:{
label : {
show: true,
// position:'bottom',
},
}
},
type:'line',
data:[0.88,0.87,0.85,0.81,0.78, "-", "-", "-", "-", "-", "-"]
},
{
name:'调整前',
type:'line',
smooth:false, //关键点,为true是不支持虚线,实线就用true
itemStyle:{
normal:{
label : {
show: true,
position:'bottom',
},
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:["-", "-","-", "-", 0.78,0.77,0.75,0.74,0.73,0.70,0.68]
},
{
name:'调整前后',
itemStyle:{
normal:{
label : {
show: true,
// position:'bottom',
},
}
},
type:'line',
data:[0.88,0.87,0.85,0.81,0.78, "-", "-", "-", "-", "-", "-"]
},
{
name:'调整后',
type:'line',
smooth:false, //关键点,为true是不支持虚线,实线就用true
itemStyle:{
normal:{
label : {
show: true,
// position:'bottom',
},
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:["-", "-","-", "-", 0.78,0.78,0.77,0.77,0.76,0.76,0.75 ]
},
]
};
受到 echarts 代码的启发,我觉得既然 pyecharts 来源于 echarts,那么肯定有共通之处,终于让我发现新大陆,实现了同样的功能。不废话,上代码:
# 算法思想:把两条线拆成四条线来做
def draw_picture():
columns = [8,9,10,11,12,13,14,15,16,17,18]
columns = [str(item) for item in columns]
y1 = [0.88,0.87,0.85,0.81,0.78,'-','-','-','-','-','-']
y2 = [0.88,0.87,0.85,0.81,0.78,'-','-','-','-','-','-' ]
y3 = ['-','-','-','-',0.78,0.77,0.75,0.74,0.73,0.70,0.68]
y4 = ['-','-','-','-',0.78,0.78,0.77,0.77,0.76,0.76,0.75 ]
line = Line("数值变化")
line.add('调整前', columns, y1, is_label_show = True, yaxis_min = 0.5,label_pos = 'bottom')
line.add('调整后',columns,y2,is_label_show = True, yaxis_min = 0.5,)
line.add('调整前', columns, y3, is_label_show = True, yaxis_min = 0.5,label_pos = 'bottom',mark_point_symbol='diamond',line_type = 'dashed')
line.add('调整后',columns,y4,is_label_show = True, yaxis_min = 0.5,mark_point_symbol='diamond',line_type = 'dashed')
line.render("example.html")
以上,问题解决~