如何使用 jquery 函数将系列数据传递给 echart 选项答案

【问题标题】：How to pass series data to echart option using jquery function如何使用 jquery 函数将系列数据传递给 echart 选项
【发布时间】：2023-03-28 13:31:01
【问题描述】：

我想要一个使用 eCharts 的动态条形图。我正在尝试使用 jquery 函数传递系列值，但它不接受。Hre 是我的代码 -

var data="[{name:'Complete Project', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'New Project', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]}]";

getBarGraph(data);

而echart初始化代码是-

       function getBarGraph(data){                
            var dom = document.getElementById("echart-bar");
            var myChart = echarts.init(dom);

            option = null;
            option = {
                tooltip : {
                    trigger: 'axis'
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
                    }
                ],
                yAxis : [{ type : 'value' }],
                series : data
          };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
       }

但在浏览器中没有结果。那么如何传递系列值呢？

提前致谢

【问题讨论】：

标签： jquery charts bar-chart echarts

【解决方案1】：

试试下面的代码它会工作。我在 cmets 中添加了详细信息。

附加输出。 https://www.screencast.com/t/3yLCOmRVa

<!doctype html>
        <html>
        <head>
            <title>ECharts Sample</title>
            <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
        </head>
        <body>
            <div id="echart-bar" style="width: 500px; height: 350px;"></div>
            <script>

            //You need to quote your labels, otherwise will get an unexpected token in JSON
            var series='[{"name":"Complete Project", "type":"bar", "data":[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{"name":"New Project", "type":"bar", "data":[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]}]';

            //Call the function 
            getBarGraph(series);

            function getBarGraph(data){
                var dom = document.getElementById('echart-bar');
                var myChart = echarts.init(dom);
                var option = {
                    title: { text: 'ECharts Sample' },
                    tooltip : {
                        trigger: 'axis'
                    },

                     xAxis : [
                        {
                            type : 'category',
                            data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
                        }
                    ],
                    yAxis : [{ type : 'value' }],

                    //Use the JavaScript function JSON.parse() to convert text into a JavaScript object:
                    series: JSON.parse(data),
                };
                myChart.setOption(option);

            }
            </script>
        </body>
        </html>

【讨论】：

@Rifat Tanjir，当您有机会尝试上述解决方案时，它会起作用。我也附上了图表的结果截图。
但是现在我遇到了一个问题，当我根据我在 HTML 表单中的选择值调用函数时，它将新的参数格式传递到系列中，但是栏没有改变，仍然没有数据进入系列然后酒吧看起来仍然一样。如何解决这个问题，任何想法。谢谢@Shivendra_Sing
根据选择值如何传递新参数。？