eCharts 数据转换json
public ActionResult ShowChart()
{
return View();
}
<div id="main" style="width:600px;height:400px;"></div>
<script src="~/Scripts/echarts.js"></script>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [, , , , , ]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

public ActionResult ShowChart()
{
List<string> productList = new List<string> {
"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"
};
ViewBag.productList =Newtonsoft.Json.JsonConvert.SerializeObject(productList);
return View();
}
@ViewBag.productList
<div id="main" style="width:600px;height:400px;"></div>
<script src="~/Scripts/echarts.js"></script>
<script>
alert('@ViewBag.productList');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [, , , , , ]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

@ViewBag.productList
<div id="main" style="width:600px;height:400px;"></div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/echarts.js"></script>
<script>
alert('@ViewBag.productList');
var dataContent = $.parseJSON('@(new HtmlString(ViewBag.productList))');
alert(dataContent);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

@ViewBag.productList
<div id="main" style="width:600px;height:400px;"></div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/echarts.js"></script>
<script>
alert('@ViewBag.productList');
var dataContent = $.parseJSON('@(new HtmlString(ViewBag.productList))');
alert(dataContent);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: dataContent //["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

eCharts 数据转换json的更多相关文章
- arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式
arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...
- C# 对象数据转换Json帮助类 JsonHelp
C# 对象数据转换Json帮助类 JsonHelp using System; using System.Data; using System.Configuration; using System. ...
- PHP Echarts Ajax Json柱形图示例
<?php $server = '127.0.0.1'; $user = 'root'; $password = ''; $database = 'yiibaidb'; $conn = new ...
- .NET Core 1.1日期解析无APi、SQL Server数据转换JSON
前言 在批量导入Excel中的数据时发现出生日期为整数也就是为天数,结果倒腾了翻,这是其一,其二是数据库中的某一列存的是JSON数据,但是场景是为了作为作业来运行,此时不得不将筛选出的数据手动拼接成J ...
- echarts 百度地图 json
百度ECharts地图Json数据在线下载 最近需要写一个echarts地图统计表,苦于弄不到对应的地图json文件, CSDN 上下载的很多不完整或者不能用,功夫不负苦心人找到了这个. 阿里云地图选 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- java -json()
json-lib和org.json的使用几乎是相同的,我总结出的区别有两点: 两种包 1. List集合转换成json方法 List list = new ArrayList(); list.add( ...
- 关于 Ajax 提交参数格式,及返回类型json
function Login() { $.ajax({ //提交方式 type:&q ...
- vue echarts map的使用,页面多图动态自适应
最近在vue中使用echarts时,遇到了一些坑,在此记录一下. 1:echarts map的使用 2:页面多图自适应,只有一个图生效 3:根据设备的dpr,动态的修改了meta标签中的initial ...
随机推荐
- Guava库介绍之实用工具类
作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文是我写的Google开源的Java编程库Guava系列之一,主要介 ...
- 戴尔灵越15-5000/3558等系列修改BIOS设置U盘启动
今天在电脑群遇到一个群友的机型是戴尔灵越15-5000,他问我这款机器怎么设置U盘启动. 看到它的BIOS界面之后,我来了点兴趣.. 本文供图:辽宁沈阳-打老虎(921407164) 电脑群:电脑爱好 ...
- iOS集成sharesdk遇到的坑
分享新浪微博 ★★★分享新浪微博★★★ 前言: 写这个目地是为了记录那些过坑,直接先上效果图.大家看看如果你遇到了应该如果处理更好,因为刚一看到这个效果的时候就明白其实很简单不就是分享微博吧.但是要求 ...
- lr文件下载脚本(文件参数化重命名)
http://wenku.baidu.com/link?url=6oiIadyF9eFS4VshKbfJDnxrBh2IX919ndi0JO8yoqTRNRNIpavFrZJ9LPVb-FBSfbRY ...
- Dreamweaver 扩展开发: Calling a C++ function from JavaScript
After you understand how C-level extensibility works in Dreamweaver and its dependency on certain da ...
- Hadoop的数据管理
Hadoop的数据管理,主要包括Hadoop的分布式文件系统HDFS.分布式数据库HBase和数据仓库工具Hive的数据管理. 1.HDFS的数据管理 HDFS是分布式计算的存储基石,Hadoop分布 ...
- 前端学PHP之PDO预处理语句
× 目录 [1]定义 [2]准备语句 [3]绑定参数[4]执行查询[5]获取数据[6]大数据对象 前面的话 本来要把预处理语句和前面的基础操作写成一篇的.但是,由于博客园的限制,可能是因为长度超出,保 ...
- Oracle 11g静默安装软件+手工创建数据库
由于是二次跳转+远程操作,无法使用图形界面,不能直接图形界面安装.采用静默安装软件+手工创建数据库的方式完成需求. 静默模式安装Oracle软件,配置监听程序 手工建库 检查各组件是否符合要求 1. ...
- 一步一步开发Game服务器(四)地图线程
时隔这么久 才再一次的回归正题继续讲解游戏服务器开发. 开始讲解前有一个问题需要修正.之前讲的线程和定时器线程的时候是分开的. 但是真正地图线程与之前的线程模型是有区别的. 为什么会有区别呢?一个地图 ...
- Vmware虚拟机安装Ubuntu并设置root登陆
主机操作系统是win7.在Ubuntu官网下好系统镜像.iso文件,安装好Vmware workstation软件 1 安装Ubuntu系统到Vmware虚拟机: 注意下面这步是无法直接设置账号为ro ...