最近工作中将hightcharts替换为了echarts,总结一些问题如下:以便以后使用查询
//初始化,list_group-要承接图表的容器id
var myChart = echarts.init(document.getElementById('list_group'));
//设置option
var option = {
//标题
title:{
//位置 值有 left right center
left:'center',
text:'大城市精细化预报趋势',
textStyle:{
//文字颜色
color:'grey',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize: 18
},
subtext:'副标题',
//副标题文本样式
subtextStyle:{
//文字颜色
color:'grey',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize: 14
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
//设置图表大小
grid: {
right: '20%'
},
//工具栏
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
//图例
legend: {
//图例位置 默认在上方 left:'left'等设置
bottom:'50',
data:["温度","最高温","最低温","湿度","降水量","风速","云量"]
},
grid: {
bottom: '100',
left: '12%',
right: '12%'
},
//x轴下方可拖动
dataZoom: [{
startValue: timearr[0],
endValue: timearr[3],
}, {
type: 'inside'
}],
//x轴
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
//横坐标数据
data: timearr
}
],
//y 轴
yAxis: [
{
type: 'value',
name: '占比',
position: 'right',
axisLabel: {
formatter: '{value} '
}
},
{
type: 'value',
name: '降水量',
position: 'right',
offset: 40,
axisLabel: {
formatter: '{value} '
}
},{
type: 'value',
name: '风速',
offset: 40,
position: 'left',
axisLabel: {
formatter: '{value} '
}
},
{
type: 'value',
name: '温度',
position: 'left',
axisLabel: {
formatter: '{value} '
}
}
],
//y坐标数据
series: [
{
name:'温度',
//指定使用第几个纵坐标 从0开始
yAxisIndex: 3,
//图形类型 bar柱状
type:'line',
//拐点形状
symbol:'emptyRectangle',
//是否平滑
smooth:true,
//对应数据
data:Temperature
},
{
name:'最高温',
type:'line',
symbol:'emptyDiamond',
smooth:true,
yAxisIndex: 3,
data:MaxTemp
},
{
name:'最低温',
type:'line',
symbol:'diamond',
smooth:true,
yAxisIndex: 3,
data:MinTemp
},
{
name:'湿度',
type:'line',
symbol:'rectangle',
smooth:true,
yAxisIndex: 0,
data:Humidity
},
{
name:'降水量',
type:'bar',
yAxisIndex: 1,
data:RainMount
},
{
name:'风速',
type:'line',
symbol:'circle',
smooth:true,
yAxisIndex: 2,
data:WindSpeed
},
{
name:'云量',
type:'line',
symbol:'triangle',
smooth:true,
yAxisIndex: 0,
data:CloudMount
}
]
};
myChart.setOption(option);
}