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的更多相关文章

  1. arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式

    arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...

  2. C# 对象数据转换Json帮助类 JsonHelp

    C# 对象数据转换Json帮助类 JsonHelp using System; using System.Data; using System.Configuration; using System. ...

  3. PHP Echarts Ajax Json柱形图示例

    <?php $server = '127.0.0.1'; $user = 'root'; $password = ''; $database = 'yiibaidb'; $conn = new ...

  4. .NET Core 1.1日期解析无APi、SQL Server数据转换JSON

    前言 在批量导入Excel中的数据时发现出生日期为整数也就是为天数,结果倒腾了翻,这是其一,其二是数据库中的某一列存的是JSON数据,但是场景是为了作为作业来运行,此时不得不将筛选出的数据手动拼接成J ...

  5. echarts 百度地图 json

    百度ECharts地图Json数据在线下载 最近需要写一个echarts地图统计表,苦于弄不到对应的地图json文件, CSDN 上下载的很多不完整或者不能用,功夫不负苦心人找到了这个. 阿里云地图选 ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  7. java -json()

    json-lib和org.json的使用几乎是相同的,我总结出的区别有两点: 两种包 1. List集合转换成json方法 List list = new ArrayList(); list.add( ...

  8. 关于 Ajax 提交参数格式,及返回类型json

    function Login() {                   $.ajax({                           //提交方式               type:&q ...

  9. vue echarts map的使用,页面多图动态自适应

    最近在vue中使用echarts时,遇到了一些坑,在此记录一下. 1:echarts map的使用 2:页面多图自适应,只有一个图生效 3:根据设备的dpr,动态的修改了meta标签中的initial ...

随机推荐

  1. Linux基础介绍【第四篇】

    Linux文件和目录的属性及权限 命令: [root@oldboy ~]# ls -lhi total 40K 24973 -rw-------. 1 root root 1.1K Dec 10 16 ...

  2. fhq treap最终模板

    新学习了fhq treap,厉害了 先贴个神犇的版, from memphis /* Treap[Merge,Split] by Memphis */ #include<cstdio> # ...

  3. Mono+Jexus让C#运行在Linux(centos7_x64),学习笔记

    .h2cls { background: #6fa833 none repeat scroll 0 0 !important; color: #fff; font-family: "微软雅黑 ...

  4. ReactNative入门(安卓)——API(上)

    Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, C ...

  5. Oracle11g CentOS7安装记录

    1. 操作系统环境.安装包准备 宿主机:Max OSX 10.10.5 虚拟机:Parallel Desktop 10.1.1 虚拟机操作系统:CentOS-7-x86_64-DVD-1511.iso ...

  6. 使用R画地图数据

    用R画地图数据 首先,从这里下载中国地图的GIS数据,这是一个压缩包,完全解压后包含三个文件(bou2_4p.dbf.bou2_4p.shp和bou2_4p.shx),将这三个文件解压到同一个目录下. ...

  7. 关于CommonJS规范摘录

    CommonJS规范 1. 概述 为什么要用commonjs 模块化的目的: 减少循环依赖 减少耦合,提高了模块的复用率 有利于多人开发,提高开发的效率. 规避命名的冲突.全局变量的污染.有利于代码的 ...

  8. Android-Eclipse-INSTALL_FAILED_UPDATE_INCOMPATIBLE错误

    电脑重装了系统,环境问题一大堆,唉,搞死人,这不,今天就出现了这样的一个奇怪的问题. INSTALL_FAILED_UPDATE_INCOMPATIBLE 最后搜了一遍,发现是因为已经安装了这个包,包 ...

  9. 【Win 10 应用开发】Web授权示例:获取新浪微博的授权码

    在使用类似微博的开放API的时候,会涉及到授权的问题,就拿微博来说,当用户在你的应用中需要调用微博API来处理一些事情时,你首先要让用户登录微博,得到用户授权后,才能调用微博API. 授权通常通过一个 ...

  10. Android自定义控件之自定义ViewGroup实现标签云

    前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...