echarts插件使用初级的记录

最新推荐文章于 2023-05-23 14:54:36 发布

闲云野鹤（时光的梦呓）

最新推荐文章于 2023-05-23 14:54:36 发布

阅读量428

点赞数

分类专栏： ASP.NET 文章标签： echarts

本文链接：https://blog.csdn.net/Small_madman/article/details/125517415

版权

ASP.NET 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

多年前用过echars,近期又因为一些公司的业务原因导致又要画图啥的，所以又去研究了一下。现在只是记录一下，以免以后又要从最基础的开始。啊哈哈哈。

echarts：官网网址示例：很奇怪的是我家里的网是打不开这个网站的。公司的网可以。

Examples - Apache ECharts

官方示例已经很强大了，我相信你看完官网的示例，肯定知道该怎么做了。我这边所下载的官网的dll做了稍微的变动，主要是样式变动。

分享一下所画的图：

1.饼图：

所涉及到的代码：

html：

js：

//整体的年龄分布
function GetAllAgeSub() {
$.post('CartChartsService.ashx', { act: 'GetAllAgeSub' }, function (r) {
if (typeof (r) != "undefined") {
if (r == "false") {
layer.msg('数据获取失败！', { icon: 5 });
}
else {
var myChart2 = echarts.init(document.getElementById('allagesub'), 'dark'); // dark 可尝试修改为 light
myChart2.setOption({
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['pie'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '有效年龄段分布',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data: r,
label: {
show: true,
position: "outside",
color: '#7F8FA4',
fontSize: 12,
formatter: '{b}:{d}%;数量:{c}'
},
labelLine: {
show: true,
}
}
]
});
}
}
}, 'json');
}
这个是调用的后台的api，后台出来的json格式的数据大概是这样的：

{[{"value":7410,"name":"18~35岁"},{"value":10202,"name":"36~45岁"},{"value":19616,"name":"46～65岁"}]}

2.堆叠图

html：

js：

//渠道量年龄分布统计
function GetChannelAgeSub() {
$.post('CartChartsService.ashx', { act: 'GetChannelAgeSub' }, function (r) {
if (typeof (r) != "undefined") {
if (r == "false") {
layer.msg('数据获取失败！', { icon: 5 });
}
else {
var myChart6 = echarts.init(document.getElementById('channelagesub'));

}
}
}, 'json');
}

后台出来的数据源在浏览器上console.log为：

3.折柱混合图：

html：

js：

//激活时间轴（以月为主）激活率
function GetMonthNum() {
$.post('CartChartsService.ashx', { act: 'GetMonthNum2' }, function (r) {
if (typeof (r) != "undefined") {
if (r == "false") {
layer.msg('数据获取失败！', { icon: 5 });
}
else {
var myChart11 = echarts.init(document.getElementById('monthnum'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['每月售卡量', '当月售卡当月激活量', '每月叠加激活量']
},
xAxis: [
{
type: 'category',
data:r.title,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [{
type: 'value',
name: '每月售卡量',
data: [10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000]
},
{
type: 'value',
name: '当月售卡当月激活量',
data: [10000, 20000, 30000, 40000, 50000, 60000, 70000,80000]
}],
series: [
{
name: '每月售卡量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: r.numdata1,
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
max: 80000,
},
{
name: '当月售卡当月激活量',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: r.numdata2,
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
max:80000,
},
{
name: '每月叠加激活量',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: r.numdata3,
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
max: 80000,
}
]
};
myChart11.setOption(option);