console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
color: ['#EFA90D', '#006BB0', '#059341','#DC2F1F'], // 柱子的颜色，几个柱子就可以设置几个颜色
tooltip: {
},
legend: {
top: 8,
itemWidth: 10,
itemHeight: 10,
data: ['药品费','耗材费', '检验检查费', '其他费','偏差级别','药品费偏差级别', '耗材费偏差级别','检验检查费偏差级别', '其他费偏差级别']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLabel: {
color: '#999999',
},
axisLine: {show: false},
axisTick: {show: false},
boundaryGap: ['20%', '20%'],
data: ['2020年', '2021年', '2022年']
}
],
yAxis: [
{
type: 'value',
name: '均费',
nameTextStyle: {
color: '#999999',
},
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
margin: 2,
interval: 15,
color: '#999999',
}
}, {
type: 'value',
name: '增长率(%)',
nameTextStyle: {
color: '#999999',
},
splitLine:{show: false},//去除网格线
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
margin: 2,
interval: 15,
color: '#999999',
}
}
],
series: [
{
name: '药品费',
type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
stack: 'Ad', // 设置这个就会成为堆叠柱状图
emphasis: { focus: 'series' },
data: [4, 4, 5]
},
{
name: '耗材费',
type: 'bar',
stack: 'Ad',
emphasis: { focus: 'series' },
data: [4, 4, 5]
},
{
name: '检验检查费',
type: 'bar',
stack: 'Ad',
emphasis: { focus: 'series' },
data: [4, 4, 5]
},
{
name: '其他费',
type: 'bar',
stack: 'Ad',
emphasis: { focus: 'series' },
data: [4, 4, 5]
},
{
name: '药品费偏差级别',
type: 'line',
color:['#EFA90D'], //折线条的颜色
smooth: true,
yAxisIndex: 1,
itemStyle: {
shadowBlur: 2,
},
data: [31, 62, 89]
},
{
name: '耗材费偏差级别',
type: 'line',
smooth: true,
color:['#006BB0'], //折线条的颜色
yAxisIndex: 1,
itemStyle: {
shadowBlur: 2,
},
data: [20, 40, 40]
},
{
name: '检验检查费偏差级别',
type: 'line',
color:['#059341'], //折线条的颜色
smooth: true,
yAxisIndex: 1,
itemStyle: {
shadowBlur: 2,
},
data: [30, 60, 84]
},
{
name: '其他费偏差级别',
type: 'line',
color:['#DC2F1F'], //折线条的颜色
smooth: true,
yAxisIndex: 1,
itemStyle: {
shadowBlur: 2
},
data: [-21, 40, 60]
},
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.off('click');
myChart.on('click',function(e){
if(e.dataIndex === 1){
//没用选中的取消高亮
myChart.dispatchAction({type: 'highlight', dataIndex: 0});
}
});
</script>
</body>
</html>