var option = { title: { text: '检测详情' }, tooltip: { trigger: 'axis' }, legend: { data: ['权益首页', '套餐转换'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: null }, yAxis: { type: 'value' }, series: [ { name: '权益首页', type: 'line', //stack: 'Total', data: null }, { name: '套餐转换', type: 'line', //stack: 'Total', data: null } ] }; $.ajax({ url:"/sms/test", type:'post', data:{time_date : time_date1}, dataType:'json', success:function(data){ alert(data[0]); alert("结束") option.xAxis.data = data[2] option.series[0].date = data[1] option.series[1].date = data[0] alert("测试+++++") alert(data[1]) alert(option.series[0].data) myChart.setOption(option); },data[1]是有值的，为啥赋值给option.series[0].data之后打印还是null

时间: 2024-03-15 07:46:29 浏览: 108

根据你提供的代码，我发现在给option.series[0].data赋值时，使用了错误的属性名。应该使用data而不是date，因此导致了赋值不成功。你可以将下面的代码： ``` option.series[0].date = data[1] ``` 修改为： ``` option.series[0].data = data[1] ``` 这样就可以将data[1]赋值给option.series[0].data了。

var app = {}; var option; option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' },

这段代码是 ECharts 的图表配置项，用于配置图表的各种属性和样式。在这个例子中，我们定义了一个名为 `option` 的对象，用于配置一个堆叠折线图。首先，我们设置图表的 `title`，`tooltip`，`legend`，`grid`，`toolbox` 等属性，用于显示图表的标题、提示框、图例、网格和工具栏等元素。然后，我们设置图表的 `xAxis` 和 `yAxis` 属性，用于定义图表的 x 轴和 y 轴。在这个例子中，我们将 x 轴的类型设置为 `category`，表示 x 轴的数据是离散的；将 `boundaryGap` 设置为 `false`，表示坐标轴两端空白策略，默认值为 `true`，即数据点在坐标轴两端；并设置 x 轴的数据为 `['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']`，表示 x 轴的数据分别为周一到周日。最后，我们没有在代码中完整定义图表的数据，数据需要在代码的其他部分进行补充。在 ECharts 中，数据通常是通过 `series` 属性来定义的，例如： ```javascript series: [{ name: 'Email', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Search Engine', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] }] ``` 在这个例子中，我们定义了 5 条折线，并分别设置了它们的名称、类型、数据和堆叠方式。

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淘宝数据分析可视化</title> <script src="https:/ /cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script> </head> <body> <h1 align="center ">Spark淘宝数据分析可视化图表</h1> <div class="empty"></div> <div class="contain"> <div id="box1" class="public"></div> <div id="box2" class="public"></div> <div id="box3" class="public"></div> <div id="box4" class="public"></div> </div> <script type="text/javascript"> $.getJSON( " /static/result1.json ", function(data) { var name = [ ] var value = [ ] $.each(data,function(key,val) { name. push(val[ "action" ]); value.push({ " value " : val[ "count"], "name " : val[ "action "] }) }); var mychart1 = echants. init(document.getElementById( ' box1')); //指定图表的配置项和数据 var option1 = { } </script> <script type="text/javascript"></script> <script type="text/javascript"></script> <script type="text/javascript"></script> <script type="text/javascript"></script> </body> 帮我补充var option1中的代码

可以根据数据的具体情况来补充相应的代码，以下是一些可能会用到的常见配置项和数据设置： 1. 饼图配置项和数据设置： ``` var option1 = { title : { text: '用户行为统计', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: name }, series : [ { name: '用户行为', type: 'pie', radius : '55%', center: ['50%', '60%'], data: value.sort(function (a, b) { return a.value - b.value; }), itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; ``` 2. 柱状图配置项和数据设置： ``` var option1 = { title: { text: '用户行为统计', x: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: name, x: 'left' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: name }, yAxis: { type: 'value' }, series: [ { name: '用户行为', type: 'bar', data: value, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; ``` 3. 折线图配置项和数据设置： ``` var option1 = { title: { text: '用户行为统计', x: 'center' }, tooltip: { trigger: 'axis' }, legend: { data: name, x: 'left' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: name }, yAxis: { type: 'value' }, series: [ { name: '用户行为', type: 'line', stack: '总量', data: value, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; ```

阅读全文

相关推荐

echarts动态曲线图，实现代码

Highcharts-7.1.0.zip

Echarts考试分数柱状图代码.zip

ECharts5入门指南：快速上手

Echarts入门指南：数据可视化基础

echarts进阶：多种图表的组合展示

基础中的基础：echarts中的常用图表类型

代码生成：echarts智慧农业模板

echarts代码：一个折线图展示多个属性

echarts代码：一个折线图展示多个属性，设置不同属性的颜色

html编写请使用簇状柱形图呈现两个分区4个季度的销售额情况及增长率，数据如下：

最新推荐

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

流程控制与循环结构详解：J750编程逻辑构建指南

python实现生成一个窗口，其窗口题目为“二冷配水模型模型”，窗口中包含八个输入栏，三个按钮，每个按钮点击后会产生一个不同的页面

MATLAB实现变邻域搜索算法源码解析

关系数据表示学习

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序