ホームページ >ウェブフロントエンド >jsチュートリアル >ECharts ファネル チャート: データ ファネルの変更を表示する方法
ECharts ファネル チャート: データ ファネルの変更を表示する方法、特定のコード サンプルが必要です
3.1 データを準備する
var data = [ { name: '访问', value: 100 }, { name: '浏览', value: 80 }, { name: '点击', value: 60 }, { name: '转化', value: 40 }, { name: '下单', value: 20 }, { name: '支付', value: 10 } ];
var myChart = echarts.init(document.getElementById('chart'));
ここで、
'chart' は、ECharts チャートを収容するために使用される HTML 要素の ID です。
3.3 ファネル チャートの構成
var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" }, series: [ { name: '漏斗图', type: 'funnel', left: '10%', top: 60, bottom: 60, width: '80%', min: 0, max: 100, minSize: '0%', maxSize: '100%', sort: 'descending', gap: 2, label: { show: true, position: 'inside' }, emphasis: { label: { show: true, fontSize: 20 } }, data: data } ] };上記の構成では、ツールチップの内容と形式を設定し、ファネル チャートの位置とサイズを設定し、データの並べ替え方法を設定し、ラベル等の表示方法
3.4 チャートをレンダリングする最後に、設定をチャート インスタンスに適用し、
setOption
myChart.setOption(option);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 漏斗图示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> var data = [ { name: '访问', value: 100 }, { name: '浏览', value: 80 }, { name: '点击', value: 60 }, { name: '转化', value: 40 }, { name: '下单', value: 20 }, { name: '支付', value: 10 } ]; var myChart = echarts.init(document.getElementById('chart')); var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" }, series: [ { name: '漏斗图', type: 'funnel', left: '10%', top: 60, bottom: 60, width: '80%', min: 0, max: 100, minSize: '0%', maxSize: '100%', sort: 'descending', gap: 2, label: { show: true, position: 'inside' }, emphasis: { label: { show: true, fontSize: 20 } }, data: data } ] }; myChart.setOption(option); </script> </body> </html>上記のコードを通じて、ブラウザーにファネル チャートを表示し、対話型ツールを通じてデータを操作できます。さらなる分析と探索のために ECharts によって提供される関数。
以上がECharts ファネル チャート: データ ファネルの変更を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。