现在饼状图，柱状图，还有一种混合图（折现，柱状，面积混在一起）每一个单个的图都做好了，但是这样并没有达到目的，需要把这三种图表分装成一个工具，因为之前没做过封装工具的功能，有点费劲加吃力，没有思路。
求各路大神有谁用js做过这样的封装。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雷达图</title>
<script src="./echarts.min.js"></script>
</head>
<body>
<div id="main" ></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
var option = {
backgroundColor: '#c9dd22',
title: {
text: '自定义雷达图'
},
legend: {
data: ['利润']
},
radar: [
{
indicator: [
{ text: '指标一' },
{ text: '指标二' },
{ text: '指标三' },
{ text: '指标四' },
{ text: '指标五' },
{ text: '指标六' },
{ text: '指标七' }
],
center: ['50%', '50%'],//坐标位置
radius: 120,//设置半径大小
startAngle: 90,//指标角度
splitNumber: 4,//圆内分割环书
shape: 'circle',//外形为圆形，默认是直线
name: {
formatter:'【{value}】',
textStyle: {
color:'#72ACD1'//标注字体颜色
}
},
splitArea: {
areaStyle: {
color: ['rgba(114, 172, 209, 0.2)',
'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 225)'//线条颜色
}
}
},
],
series: [
{
name: '雷达图',
type: 'radar',
itemStyle: {
emphasis: {
// color: 各异,
lineStyle: {
width: 4//鼠标移动显示线条宽度
}
}
},
data: [
{
// value: [0,0,0,0, 0,0,0],
value: [350, 5, 0.30, -100, 200,100,300],
name: '利润',
symbol: 'rect',
symbolSize: 5,//线条交点大小
lineStyle: {
normal: {
// type: 'dashed'//面积图形虚线
}
}
},
]
},
]
}
myChart.setOption(option);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱形图</title>
<script src="./echarts.min.js"></script>
</head>
<body>
<div id="main" ></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
//制定图表的配置项和数据
// app.title = '坐标轴刻度与标签对齐';
var option = {
// color: ['#f444f0'], //#3398DB
backgroundColor: '#c9dd22',
title : {
text: '某公司----',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' 'shadow'
}
},
legend: {
data:['收益数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['一', '二', '三', '四', '五', '六','七','八','九','十'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
// boundaryGap: [0, '80%'],
type : 'value'
}
],
series : [
{
name:'收益率',
type:'bar',
barWidth: '60%',
label: {
normal: {
show: true,
position: 'top'//柱状标示信息
}
},
name:'收益率',
data:[130, 150, 280, 310, 450, 500, 650,700,850,880]
}
// ,
// {
// name:'拒绝',
// type:'line',
// // smooth:true,
// // itemStyle: {normal: {areaStyle: {type: 'default'}}},
// data:[0,50,80,440,550,680,750,850,920,1200]
// }
// ,
// {
// name:'拒绝',
// type:'line',
// // smooth:true,
// // itemStyle: {normal: {areaStyle: {type: 'default'}}},
// data:[0,30,120,320,480,550,680,750,870,1100]
// }
]
};
myChart.setOption(option);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>混搭图</title>
<script src="/echarts.min.js"></script>
</head>
<body>
<div id="main" ></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
//制定图表的配置项和数据
var option={
//标题
title : {
text: '某公司销售情况',
subtext: '纯属虚构'
},
//提示
tooltip : {
trigger: 'xAxis'
},
dataZoom: [
{
type: 'slider', //支持鼠标滚轮缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
},
{
type: 'inside', //支持单独的滑动条缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
}
],
//图列
legend: {
data:['意向','预购','成交','拒绝','购买']
},
color:[
'#0eb83a', //温度曲线颜色
'#fa83c6', //湿度曲线颜色
'#B15BFF', //压强图颜色
'#68CFE8', //雨量图颜色
'#DJ832N',
'#FFDC35' //风速曲线颜色
],
//工具箱
toolbox: {
// show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
//坐标轴axis
//横轴
xAxis : [
{
// type : 'category',
// boundaryGap : true,
// name:'年',
data : ['2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
}
],
//纵轴
yAxis : [
{
type : 'value',
name : '水量',
axisLabel : {
formatter: '{value} ml'
}
},
{
type : 'value',
name : '温度',
// max: 100,
// min: -25,
markPoint : {
data : [
{type : 'max', name: '0'},
{type : 'min', name: '-40'}
]
},
markLine : {
data : [
{type : 'average', name: '32'}
]
},
axisLabel : {
formatter: '{value} °C'
}
}
],
//数据系列
series : [
{
//面积图
name:'成交',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[100, 300, 500, 550, 620, 830, 710,370,480,899]
},
{
//柱图
name:'预购',
type:'bar',
yAxisIndex: 0,
barWidth: '60%',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[180, 107, 1432, 987, 1320, 777, 888,1008,1187,1450]
},
{
//折线图
name:'意向',
type:'line',
symbol:'emptyrect',//空心矩形
// smooth:true,
// itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[20,90,120,234,601,750,950,1150,1320,1432,]
},
{
name:'拒绝',
type:'line',
symbol:'circle',//实心圆
// smooth:true,
// itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[45,80,180,290,334,501,650,860,920,1350]
},
{
name:'购买',
type:'line',
symbol:'emptydiamond',//菱形
// smooth :true,
// itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[30,60,80,150,234,401,720,870,980,1220]
},
]
};
myChart.setOption(option);
</script>
</body>
</html>
热门评论
-
人间四月02018-09-13 0
查看全部评论这个只要封装一个 OC 的ChartModel模型文件,将模型文件传值给 js 就可以啦,没什么难度吧!