图表主要兼容大型屏幕，需要小型图表可以尝试降低scale的大小，或者自行调整样式
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(‘charts1‘));
var scale = 2;
var yData1 = ["271", "301", "141", "121", "211"];
var yData2 = ["431", "211", "313", "101", "641"];
var yData3 = ["2771", "3801", "8141", "11121", "22711"];
var yData4 = ["3731", "4011", "13313", "10861", "23641"];
var option =
{
tooltip:
{
trigger: ‘axis‘,
axisPointer:
{
type: ‘shadow‘
},
textStyle:
{
fontSize: scale >= 1 ? 12 * scale : 12,
},
formatter: function(params)
{
let returnStr = ‘‘;
returnStr += params[0].name + "年 : <br />";
returnStr += params[2].marker + " " + params[2].seriesName + " : " + params[2].value + " 项<br />";
returnStr += params[5].marker + " " + params[5].seriesName + " : " + params[5].value + " 项<br />";
returnStr += params[6].marker + " " + params[6].seriesName + " : " + params[6].value + " 万元<br />";
returnStr += params[7].marker + " " + params[7].seriesName + " : " + params[7].value + " 万元<br />";
return returnStr;
}
},
grid:
{
left: ‘2%‘,
right: ‘4%‘,
bottom: ‘4%‘,
top:‘16%‘,
containLabel: true
},
legend:
{
data: [‘国家项目立项数‘, ‘省级项目立项数‘, ‘国家项目投入经费‘, ‘省级项目投入经费‘],
right: 170,
top:1,
textStyle:
{
color:"#FFFFFF",
fontSize: scale >= 1 ? 12 * scale : 12,
},
itemWidth: 18 * scale,
itemHeight: 12 * scale,
color: ‘#242424‘
},
xAxis:
{
type: ‘category‘,
data: [‘2016‘, ‘2017‘, ‘2018‘, ‘2019‘, ‘2020‘],
axisLine:
{
lineStyle:
{
show: true,
lineStyle:
{
color: ‘#6A989E‘,
}
}
},
axisLabel: {
textStyle:
{
fontFamily: ‘Microsoft YaHei‘,
color: ‘#fff‘,
fontWeight: ‘normal‘,
fontSize: scale >= 1 ? 12 * scale : 12,
lineHeight: 12 * scale
}
},
},
yAxis:
[
{
type: ‘value‘,
name: " 立项数（单位：项）\n",
nameTextStyle:
{
color: ‘#ffffff‘,
fontSize: scale >= 1 ? 12 * scale : 12,
},
axisLine:
{
show: false,
},
splitLine:
{
show: false,
},
axisLabel:
{
formatter: ‘{value}‘,
color: ‘#fff‘,
fontSize: scale >= 1 ? 12 * scale : 12,
}
},
{
type: ‘value‘,
name: " 投入经费（单位：万元）\n",
nameTextStyle:
{
color: ‘#ffffff‘,
fontSize: scale >= 1 ? 12 * scale : 12,
},
axisLine:
{
show: false,
},
splitLine:
{
show: false,
},
axisLabel:
{
formatter: ‘{value}‘,
color: ‘#fff‘,
fontSize: scale >= 1 ? 12 * scale : 12,
}
},
],
series:
[
{
yAxisIndex: 0,
type: ‘pictorialBar‘,
symbolSize: [40 * scale, 8],
symbolOffset: [-24 * scale, -4],
symbolPosition: ‘end‘,
z: 12,
color: "#3440FF",
data: yData1
},
{
yAxisIndex: 0,
type: ‘pictorialBar‘,
symbolSize: [40 * scale, 8],
symbolOffset: [-24 * scale, 4],
z: 12,
color: "rgba(126,192,238,0.6)",
data: yData1
},
{
name: ‘国家项目立项数‘,
yAxisIndex: 0,
type: ‘bar‘,
barWidth: 40 * scale,
itemStyle:
{
normal:
{
opacity: .7,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: ‘blue‘
},
{
offset: 1,
color: ‘#7EC0EE‘
},
]),
barBorderRadius: 0,
},
},
label:
{
show: true,
position: [‘10‘,‘-34‘],
color: ‘#00f8ff‘,
fontSize: scale >= 1 ? 12 * scale : 12,
},
data: yData1
},
{
yAxisIndex: 0,
type: ‘pictorialBar‘,
symbolSize: [40 * scale, 8],
symbolOffset: [24 * scale, -4],
symbolPosition: ‘end‘,
z: 12,
color: "#FF1155",
data: yData2
},
{
yAxisIndex: 0,
type: ‘pictorialBar‘,
symbolSize: [40 * scale, 8],
symbolOffset: [24 * scale, 4],
color: "#FFC0CB",
z: 12,
data: yData2
},
{
name: ‘省级项目立项数‘,
yAxisIndex: 0,
type: ‘bar‘,
barWidth: 40 * scale,
itemStyle:
{
normal:
{
opacity: .7,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: ‘#FF2246‘
},
{
offset: 1,
color: ‘#FFC0CB‘
},
]),
barBorderRadius: 0,
}
},
label:
{
show: true,
position: [‘10‘,‘-34‘],
color: ‘#00f8ff‘,
fontSize: scale >= 1 ? 12 * scale : 12,
},
data: yData2
},
{
name: ‘国家项目投入经费‘,
yAxisIndex: 1,
type: ‘line‘,
symbolSize: 10,
symbol: ‘circle‘,
itemStyle: {
normal: {
color: ‘blue‘,
barBorderRadius: 0,
},
},
lineStyle: {
normal: {
width: 4,
color: {
type: ‘linear‘,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: ‘blue‘
},
{
offset: 1,
color: ‘#7EC0EE‘
},
],
global: false,
},
},
},
data: yData3,
},
{
name: ‘省级项目投入经费‘,
yAxisIndex: 1,
type: ‘line‘,
symbolSize: 10,
symbol: ‘circle‘,
itemStyle: {
normal: {
color: ‘#FF2246‘,
barBorderRadius: 0,
},
},
lineStyle: {
normal: {
width: 4,
color: {
type: ‘linear‘,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: ‘#FF2246‘
},
{
offset: 1,
color: ‘#FFC0CB‘
},
],
global: false,
},
},
},
data: yData4,
},
]
};
myChart.setOption(option);
</script>