Echarts可视化教程（八）—— 标记点和标记线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
/********* Begin *********/
title : {
text : "各城市肯德基门店数量"//标题
},
tooltip : {
},
xAxis : [
{
type : 'category',//表示x轴的每一项由几组数据组成
data : ['北京', '上海','深圳','广州', '长沙']//x轴标题
}
],
yAxis : [
{
type : 'value'//每一项都是数据
}
],
series : [
{
show:true,
name:'',//数据的名字
type:'bar',//表示柱状图
data:[439, 448, 244, 216, 111],//数据
markLine:{
data:[
{
type:'average',
name:'平均值',
symbol:['rect','diamond'],
itemStyle:{
normal:{color:'green'}
}
}
]
},
markPoint:{
data :[
{
coord: [0, 439], // 标记点的坐标
itemStyle:{
normal:{color:'blue'}
},
symbol: 'rect', // 标记点的形状
value: 439
}
]
}
}
]
/********* End *********/
});
</script>
</body>
</html>Echarts可视化教程（九）—— 散点图的绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
url = "http://127.0.0.1:8080/static/data.txt";
/********* Begin *********/
myChart.setOption({
title : {
text : "小学、初中、高中学生身高体重分布图"//标题
},
xAxis : [
{
scale:true
}
],
yAxis : [
{
scale:true
}
],
series : [
{
name:'小学',
type:'scatter',
symbolSize:10,
symbol:'rect',
data: [
[137.0,42.8], [141.3,45.6], ],
itemStyle:{normal:{color:'green'}}
},
{
name:'初中',
type:'scatter',
symbolSize:10,
symbol:'circle',
data: [
[152.0,47.6], [155.8,49.8], ],
itemStyle:{normal:{color:'blue'}}
},
{
name:'高中',
type:'scatter',
symbolSize:10,
symbol:'diamond',
data: [
[167.0,64.6], [177.8, 74.8], ],
itemStyle:{normal:{color:'red'}}
},
]
});
/********* End *********/
</script>
</body>
</html>Echarts可视化教程（十）—— 气泡图的绘制
注：这道题不追求过程的话，只需要将复杂的气泡图中的代码复制过来即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var datum = [
[4, 2000, 56, 0],
[10, 4000, 74, 1],
[14, 14000, 82, 2],
];
myChart.setOption({
title : {
text : "受教育程度、人均收入、人均寿命、人类发展指数之间的关系"//标题
},
xAxis : [
{
scale:true
}
],
yAxis : [
{
scale:true
}
],
series : [
{
type:'scatter',
symbolSize:function(args){return args[2]/7;},
symbol:'rect',
data: datum,
itemStyle: {
normal: {
color:function(args){
var colorList = [
'rgb(125,255,255)', 'rgb(125,100,100)', 'rgb(125,0,0)'
];
return colorList[args.data[3]];
}
}
}
}
]
});
</script>
</body>
</html>Echarts可视化教程（十一）—— 仪表盘的绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: [{
text: '主干道平均车速和拥堵程度',
x:'30%'
}],
series: [
/********* Begin *********/
{//第一个仪表盘
name: "",
center:['50%', '50%'],
type: 'gauge',//仪表盘
min: 0,//示数的最小值
max: 10,//示数的最大值
radius: "40%",//仪表的半径
splitNumber: 1, //刻度数量
startAngle: 180,//起始的角度
endAngle: 0,//结束的角度
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 30,
color: [ //渐变的颜色
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#3aa600'
}, {
offset: 1,
color: '#f70007'
}])]
],
}
},
pointer: {//指针
show: true,
length: '50%',
width: 2,
},
axisLabel: {
show: false,//不显示刻度标签
},
detail: {
offsetCenter: [0, '-25%'],//数值的位置
textStyle: {
fontSize: 24
}
},
data: [{
value: 3, //指针数值
}]
},
{//第二个仪表盘
name: "",
center:['50%', '50%'],
type: 'gauge',//仪表盘
min: 0,//示数的最小值
max: 150,//示数的最大值
radius: "70%",//仪表的半径
splitNumber: 1, //刻度数量
startAngle: 180,//起始的角度
endAngle: 0,//结束的角度
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 40,
color: [ //渐变的颜色
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#3aa600'
}, {
offset: 1,
color: '#f70700'
}])]
],
}
},
axisLabel: {
show: false,//不显示刻度标签
},
detail: {
show:false,
},
}
/********* End *********/
]
});
</script>
</body>
</html>Echarts可视化教程（十二）—— 雷达图的绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
/********* Begin *********/
title: { //配置标题组件
text: '手机市场占比变化'
},
legend: { //配置图例组件
type: 'scroll', bottom: 15,
data: (function () {
var list = [];
for (var i = 1; i <= 28; i++) {
list.push(i + 2000 + '');
}
return list;
})()
},
visualMap: { top: '47%', right: 20, color: ['red', 'yellow'], calculable: true },
radar: { //配置雷达图坐标系组件，只适用于雷达图
indicator: [ //设置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
{ text: '诺基亚', max: 1000, color: 'purple' },
{ text: '摩托罗拉', max: 1000, color: 'green' },
{ text: '三星', max: 1000, color: 'blue' },
{ text: '苹果', max: 1000, color: 'red' },
{ text: '小米', max: 1000, color: 'brown' }
]
},
series: (function () { //配置数据系列
var series = [];
for (var i = 1; i <= 28; i++) {
series.push({
name: '', type: 'radar', symbol: 'none',
lineStyle: { width: 1 },
emphasis: { areaStyle: { color: 'rgba(0,250,0,0.3)' } },
data: [ //设置雷达图的数据是多变量（维度）
{
value: [
(40 - i) * 10*2,
((38 - i) * 4 + 60)*2,
(i * 5 + 10)*2,
i * 9*2,
(i * i / 2)*2
],
name: i + 2000 + ''
}]
});
}
return series;
})()
/********* End *********/
});
</script>
</body>
</html>Echarts可视化教程（十三）—— 词云图的绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id = "main" style="width: 1200px;height: 800px;"></div>
<script type="text/javascript" src = "../static/echarts.js"></script>
<script type="text/javascript" src = "../static/echarts-wordcloud.min.js"></script>
<script type="text/javascript">
var keywords = {
"visualMap": 22199,
"continuous": 10288,
"contoller": 620,
"series": 274470,
"gauge": 12311,
"detail": 1206,
"piecewise": 4885,
"textStyle": 32294,
"markPoint": 18574,
"pie": 38929,
"roseType": 969,
"label": 37517,
"emphasis": 12053,
"yAxis": 57299,
"name": 15418,
"type": 22905,
"gridIndex": 5146,
"normal": 49487,
"itemStyle": 33837,
"min": 4500,
"silent": 5744,
"animation": 4840,
"offsetCenter": 232,
"inverse": 3706,
"borderColor": 4812,
"markLine": 16578,
"line": 76970,
"radiusAxis": 6704,
"radar": 15964,
"data": 60679,
"dataZoom": 24347,
"tooltip": 43420,
"toolbox": 25222,
"geo": 16904,
"parallelAxis": 4029,
"parallel": 5319,
"max": 3393,
"bar": 43066,
"heatmap": 3110,
"map": 20285,
"animationDuration": 3425,
"animationDelay": 2431,
"splitNumber": 5175,
"axisLine": 12738,
"lineStyle": 19601,
"splitLine": 7133,
"axisTick": 8831,
"axisLabel": 17516,
"pointer": 590,
"color": 23426,
"title": 38497,
"formatter": 15214,
"slider": 7236,
"legend": 66514,
"grid": 28516,
"smooth": 1295,
"smoothMonotone": 696,
"sampling": 757,
"feature": 12815,
"saveAsImage": 2616,
"polar": 6279,
"calculable": 879,
"backgroundColor": 9419,
"excludeComponents": 130,
"show": 20620,
"text": 2592,
"icon": 2782,
"dimension": 478,
"inRange": 1060,
"animationEasing": 2983,
"animationDurationUpdate": 2259,
"animationDelayUpdate": 2236,
"animationEasingUpdate": 2213,
"xAxis": 89459,
"angleAxis": 5469,
"showTitle": 484,
"dataView": 2754,
"restore": 932,
"timeline": 10104,
"range": 477,
"value": 5732,
"precision": 878,
"target": 1433,
"zlevel": 5361,
"symbol": 8718,
"interval": 7964,
"symbolSize": 5300,
"showSymbol": 1247,
"inside": 8913,
"xAxisIndex": 3843,
"orient": 4205,
"boundaryGap": 5073,
"nameGap": 4896,
"zoomLock": 571,
"hoverAnimation": 2307,
"legendHoverLink": 3553,
"stack": 2907,
"throttle": 466,
"connectNulls": 897,
"clipOverflow": 826,
"startValue": 551,
"minInterval": 3292,
"opacity": 3097,
"splitArea": 4775,
"filterMode": 635,
"end": 409,
"left": 6475,
"funnel": 2238,
"lines": 6403,
"baseline": 431,
"align": 2608,
"coord": 897,
"nameTextStyle": 7477,
"width": 4338,
"shadowBlur": 4493,
"effect": 929,
"period": 225,
"areaColor": 631,
"borderWidth": 3654,
"nameLocation": 4418,
"position": 11723,
"containLabel": 1701,
"scatter": 10718,
"areaStyle": 5310,
"scale": 3859,
"pieces": 414,
"categories": 1000,
"selectedMode": 3825,
"itemSymbol": 273,
"effectScatter": 7147,
"fontStyle": 3376,
"fontSize": 3386,
"margin": 1034,
"iconStyle": 2257,
"link": 1366,
"axisPointer": 5245,
"showDelay": 896,
"graph": 22194,
"subtext": 1442,
"selected": 2881,
"barCategoryGap": 827,
"barGap": 1094,
"barWidth": 1521,
"coordinateSystem": 3622,
"barBorderRadius": 284,
"z": 4014,
"polarIndex": 1456,
"shadowOffsetX": 3046,
"shadowColor": 3771,
"shadowOffsetY": 2475,
"height": 1988,
"barMinHeight": 575,
"lang": 131,
"symbolRotate": 2752,
"symbolOffset": 2549,
"showAllSymbol": 942,
"transitionDuration": 993,
"bottom": 3724,
"fillerColor": 229,
"nameMap": 1249,
"barMaxWidth": 747,
"radius": 2103,
"center": 2425,
"magicType": 3276,
"labelPrecision": 248,
"option": 654,
"seriesIndex": 935,
"controlPosition": 121,
"itemGap": 3188,
"padding": 3481,
"shadowStyle": 347,
"boxplot": 1394,
"labelFormatter": 264,
"realtime": 631,
"dataBackgroundColor": 239,
"showDetail": 247,
"showDataShadow": 217,
"x": 684,
"valueDim": 499,
"onZero": 931,
"right": 3255,
"clockwise": 1035,
"itemWidth": 1732,
"trigger": 3840,
"axis": 379,
"selectedOffset": 670,
"startAngle": 1293,
"minAngle": 590,
"top": 4637,
"avoidLabelOverlap": 870,
"labelLine": 3785,
"sankey": 2933,
"endAngle": 213,
"start": 779,
"roam": 1738,
"fontWeight": 2828,
"fontFamily": 2490,
"subtextStyle": 2066,
"indicator": 853,
"sublink": 708,
"zoom": 1038,
"subtarget": 659,
"length": 1060,
"itemSize": 505,
"controlStyle": 452,
"yAxisIndex": 2529,
"edgeLabel": 1188,
"radiusAxisIndex": 354,
"scaleLimit": 1313,
"geoIndex": 535,
"regions": 1892,
"itemHeight": 1290,
"nodes": 644,
"candlestick": 3166,
"crossStyle": 466,
"edges": 369,
"links": 3277,
"layout": 846,
"barBorderColor": 721,
"barBorderWidth": 498,
"treemap": 3865,
"y": 367,
"valueIndex": 704,
"showLegendSymbol": 482,
"mapValueCalculation": 492,
"optionToContent": 264,
"handleColor": 187,
"handleSize": 271,
"showContent": 1853,
"angleAxisIndex": 406,
"endValue": 327,
"triggerOn": 1720,
"contentToOption": 169,
"buttonColor": 71,
"rotate": 1144,
"hoverLink": 335,
"outOfRange": 491,
"textareaColor": 58,
"textareaBorderColor": 58,
"textColor": 60,
"buttonTextColor": 66,
"category": 336,
"hideDelay": 786,
"alwaysShowContent": 1267,
"extraCssText": 901,
"effectType": 277,
"force": 1820,
"rippleEffect": 723,
"edgeSymbolSize": 329,
"showEffectOn": 271,
"gravity": 199,
"edgeLength": 193,
"layoutAnimation": 152,
"length2": 169,
"enterable": 957,
"dim": 83,
"readOnly": 143,
"levels": 444,
"textGap": 256,
"pixelRatio": 84,
"nodeScaleRatio": 232,
"draggable": 249,
"brushType": 158,
"radarIndex": 152,
"large": 182,
"edgeSymbol": 675,
"largeThreshold": 132,
"leafDepth": 73,
"childrenVisibleMin": 73,
"minSize": 35,
"maxSize": 35,
"sort": 90,
"funnelAlign": 61,
"source": 336,
"nodeClick": 200,
"curveness": 350,
"areaSelectStyle": 104,
"parallelIndex": 52,
"initLayout": 359,
"trailLength": 116,
"boxWidth": 20,
"back": 53,
"rewind": 110,
"zoomToNodeRatio": 80,
"squareRatio": 60,
"parallelAxisDefault": 358,
"checkpointStyle": 440,
"nodeWidth": 49,
"color0": 62,
"layoutIterations": 56,
"nodeGap": 54,
"color(Array": 76,
"<string>)": 76,
"repulsion": 276,
"tiled": 105,
"currentIndex": 145,
"axisType": 227,
"loop": 97,
"playInterval": 112,
"borderColor0": 23,
"gap": 43,
"autoPlay": 123,
"showPlayBtn": 25,
"breadcrumb": 119,
"colorMappingBy": 85,
"id": 18,
"blurSize": 85,
"minOpacity": 50,
"maxOpacity": 54,
"prevIcon": 12,
"children": 21,
"shape": 98,
"nextIcon": 12,
"showNextBtn": 17,
"stopIcon": 21,
"visibleMin": 83,
"visualDimension": 97,
"colorSaturation": 56,
"colorAlpha": 66,
"emptyItemWidth": 10,
"inactiveOpacity": 4,
"activeOpacity": 4,
"showPrevBtn": 19,
"playIcon": 26,
"ellipsis": 19,
"gapWidth": 19,
"borderColorSaturation": 10,
"handleIcon": 2,
"handleStyle": 6,
"borderType": 1,
"constantSpeed": 1,
"polyline": 2,
"blendMode": 1,
"dataBackground": 1,
"textAlign": 1,
"textBaseline": 1,
"brush": 3
};
var data = [];
for (var key in keywords) {
data.push({
name: key,
value: Math.sqrt(keywords[key])
})
}
var maskImage = new Image();
maskImage.src = '../static/mao.png';
var option = {
backgroundColor: '#FFFFFF',
series: [{
name: '搜索指数',
type: 'wordCloud',
sizeRange: [12, 80],
rotationRange: [-45, 90],
maskImage: maskImage,
textPadding: 0,
autoSize: {
enable: true,
minSize: 6
},
/********* Begin *********/
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 0),
Math.round(Math.random() * 0),
Math.round(Math.random() * 0)
].join(',') + ')';
}
}
},
/********* End *********/
data: data
}]
};
var myChart = echarts.init(document.getElementById('main'));
maskImage.onload = function() {
myChart.setOption(option);
};
window.onresize = function() {
myChart.resize();
}
</script>
</body>
</html>
6010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
