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

有没有一种方法可以在一个字典中显示具有给定源数据集的条形图？我使用的是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" }}

@编辑2 唯一有效的方法是将一个带有安全标签的变量放在一起，这样可以吗？或者它可能容易受到xss的攻击

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

---

举一个简单的例子并替换数据：

谢谢你的例子，但我检查了我的问题是否存在于javascript代码中：（也许你知道如何修复它？也许你最好集成到你的系统中？你可以找到详细的教程。