记录一下数据绑定方式,方便以后查阅。
apsx页面部分代码:
js代码有两种方法
方法一
<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/echarts.min.js"></script>
<div class="leftMain_middle_leftIn">
<h3>达成率</h3>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div class="biaoge" style="width:500px; height:500px" id="chartmain"></div>
<script type="text/javascript">
var data = <%=Scdcrate%>
getFloat = function (number, n) {//保留几位小数的函数
n = n ? parseInt(n) : 0;
if (n <= 0) {
return Math.round(number);
}
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
number = Number(number).toFixed(n); //补足位数
return number;
};
$(function () {
//指定图表的配置项和数据
option1 = {
};
//获取dom容器
var myChart1 = echarts.init(document.getElementById('chartmain'));
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
console.log(data);
//获取数据时显示加载状态图
myChart1.showLoading();
var time = [];
var factcn = [];
var drate = [];
var aimcn = [];
for (var i = 0; i < data.length; i++) {
time[i] = data[i]["thtime"];
factcn[i] = data[i]["factCn"];
drate[i] = getFloat(parseFloat(data[i]["DRate"] * 100), 2);
aimcn[i] = data[i]["AimCn"];
}
console.log(time);
console.log(factcn);
console.log(aimcn);
myChart1.hideLoading(); //隐藏加载动画
myChart1.setOption({
title: {
text: '',
subtext: ''
},
color: ["rgb(0,176,240)", "#e54d42", "red"],
grid: {
x: 40,
y: 40,
x2: 50,
y2: 20,
},
xAxis: {
data: time,
axisLabel: {
/*inside: true,*/
interval: 0,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
z: 10
},
yAxis: [{
type: 'value',
name: '产能',
max: 700,
splitNumber: 5,
interval: 700 / 5,
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
},
}
},
{
type: 'value',
name: '达成率',
max: 160,
min: 0,
splitNumber: 5,
interval: 160/5,
splitLine: {//取消网络线
show: false
},
axisLine: {
show: true,
//symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '70%'
},
formatter: '{value}.0%'
}
},
{
type: 'value',
name: '',
max: 700,
splitNumber: 5,
interval: 700 / 5,
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '70%'
},
},
},
],
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
name: '产能',
yAxisIndex: 0,//对应右侧Y轴
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: aimcn,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#0efdff' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
),
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: '70%'
},
formatter: '{c}'
}
},
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#0efdff' }
]
)
}
},
data: factcn,
},
{
name: '达成率',
yAxisIndex: 1,//对应右侧Y轴
type: 'line',
data: drate,
itemStyle: { //上方显示数值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: '70%'
},
formatter: '{c}%'
}
},
},
},
{
name: '',
type: 'line',
data: aimcn,
itemStyle: { //上方显示数值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: '70%'
},
formatter: '{c}'
}
},
},
},
]
});
});
</script>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
方法二
var data = <%=Scdcrate%>
getFloat = function (number, n) {
n = n ? parseInt(n) : 0;
if (n <= 0) {
return Math.round(number);
}
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
number = Number(number).toFixed(n); //补足位数
return number;
};
$(function () {
var time = [];
var factcn = [];
var drate = [];
var aimcn = [];
for (var i = 0; i < data.length; i++) {
time[i] = data[i]["thtime"];
factcn[i] = data[i]["factCn"];
drate[i] = getFloat(parseFloat(data[i]["DRate"] * 100), 2);
aimcn[i] = data[i]["AimCn"];
}
console.log(time);
console.log(factcn);
console.log(aimcn);
echarts_1(time, factcn, drate, aimcn);
});
function echarts_1(time, factcn, drate, aimcn) {
// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chartmain'));
option = {
title: {
text: '',
subtext: ''
},
color: ["rgb(0,176,240)", "#e54d42", "red"],
grid: {
x: 40,
y: 40,
x2: 50,
y2: 20,
},
xAxis: {
data: time,
axisLabel: {
/*inside: true,*/
interval: 0,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
z: 10
},
yAxis: [{
type: 'value',
name: '产能',
max: 700,
splitNumber: 5,
interval: 700 / 5,
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
},
}
},
{
type: 'value',
name: '达成率',
max: 160,
min: 0,
splitNumber: 5,
interval: 160/5,
splitLine: {//取消网络线
show: false
},
axisLine: {
show: true,
//symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '70%'
},
formatter: '{value}.0%'
}
},
{
type: 'value',
name: '',
max: 700,
splitNumber: 5,
interval: 700 / 5,
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '70%'
},
},
},
],
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
name: '产能',
yAxisIndex: 0,//对应右侧Y轴
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: aimcn,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#0efdff' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
),
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: '70%'
},
formatter: '{c}'
}
},
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#0efdff' }
]
)
}
},
data: factcn,
},
{
name: '达成率',
yAxisIndex: 1,//对应右侧Y轴
type: 'line',
data: drate,
itemStyle: { //上方显示数值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: '70%'
},
formatter: '{c}%'
}
},
},
},
{
name: '',
type: 'line',
data: aimcn,
itemStyle: { //上方显示数值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: '70%'
},
formatter: '{c}'
}
},
},
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);
window.addEventListener("resize", function () {
myChart1.resize();
});
}
cs代码
public partial class Index : System.Web.UI.Page
{
SearchShow Show = new SearchShow();
public string Line = "C01";
protected void Page_Load(object sender, EventArgs e)
{
PlanCompletionToji();
}
public string Scdcrate = "";
/// <summary>
/// 达成率
/// </summary>
private void PlanCompletionToji()
{
DataTable dr = Show.f4(Line);//数据库查询的数据(也可写table格式数据测试)
if (dr != null)
{
if (dr.Rows.Count != 0)
{
Scdcrate = ToJson(dr);
}
}
}
public static string ToJson(object obj)
{
return NewtonsoftJson(obj);
}
public static string NewtonsoftJson(object obj)
{
return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
}
}
程序需要引用工具:Newtonsoft.Json.dll
见本人发布的文章:https://blog.csdn.net/qq_42711010/article/details/123096399