目次
ヒント: 記事を作成した後、目次を自動的に生成できます。生成方法は、右側のヘルプドキュメントを参照してください。
序文
提示：最近需求上要实现一个统计报表，其中有一个堆叠柱状图+折线图的图表，官网没有现成实例，自己尝试写一个。
提示：以下是本篇文章正文内容，下面案例可供参考
1. 顧客の要求事項
2. 開発手順
1. echarts コンポーネントをカプセル化する
vue プロジェクトで echarts サブコンポーネントをカプセル化し、Prop でオプション属性を公開します。
option: {
type: Object,
default: () => ({
title: {
text: 'echart图表'
},
xAxis: {
data: ['1月', '1月', '1月', '1月', '1月', '1月']
},
yAxis: {},
series: [
{
name: '',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [10, 20, 30, 40, 50, 60]
}
]
})
}2. echart公式サイトのヒストグラム例を改造
公式 Web サイトでは、次のように最も近いインスタンスが見つかります。
この効果と折れ線グラフを組み合わせることで、目的の効果を得ることができます。さらに、ここでは 1 つの列のみが必要で、余分な列を削除しています。
チャートの完全なオプション コードは次のとおりです。
export default {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['24小时内', '24小时外', '24小时外占比']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['骨一科', '心血管内科', '普外科', '心胸外科', '呼吸内科', '神经内科', '消化内科']
}
],
yAxis: [
{
type: 'value',
name: '次数',
min: 0,
max: 18,
interval: 3,
axisLabel: {
formatter: '{value} 次'
}
},
{
type: 'value',
name: '占比',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '24小时内',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [1, 2, 3, 4, 5, 6, 7]
},
{
name: '24小时外',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [2, 3, 4, 5, 6, 7, 8]
},
{
name: '24小时外占比',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function(value) {
return value + ''
}
},
data: [73.0, 62.2, 83.3, 54.5, 66.3, 90.2, 50.3]
}
]
};3. 最終的な効果
要約する
ヒント: 記事の概要は次のとおりです:
例: 以上が今日説明する内容です。この記事では、積み上げヒストグラム + 折れ線グラフの開発プロセスを簡単に紹介するだけです。公式 Web サイトには、私たちができるように多くの例が提供されています。早く開発するために。