JavaScript - 在 ECharts 中显示带有字典的条形图

Question

有没有一种方法可以在一个字典中显示给定源数据集的条形图？我正在使用 ECharts，但很难理解他们的文档:(

我的数据：

{"TCP": 1003, "UDP": 232, "ICMP": 4, "IP": 0} 

我的选择就在那里：

var option = {

                dataset: {

                    source : myChart

                },

                title: {

                    text: 'Protocol'

                },

                xAxis: {

                    data: ['TCP', 'UDP', 'ICMP', 'IP']

                },

                yAxis: {

                    data: [0, 100, 300, 500, 700, 900, 1100]

                },

                series: [{

                    name: 'Protocol',

                    type: 'bar',

                }]

            };

非常感谢您的任何建议！

@编辑所以问题出在我的JavaScript代码中......我无法访问值，问题是什么？

const proto = JSON.parse(document.getElementById('proto').textContent);

            console.log(proto);

            console.log(proto['IP']);

我忘了提到 proto 元素来自 django 变量

{{ proto|json_script:"proto" }}

@EDIT2唯一的工作就是放置一个带有安全标签的变量，可以吗？或者可能容易受到 xss 攻击？

var proto = JSON.parse('{{ proto|safe }}');

Answer 1

举个简单的例子并替换数据：https://echarts.apache.org/examples/en/editor.html ?c=bar-background