# 基本知识
# 常用设置
xAxis: {
type: 'category',
data: dataKeys,
name: "公司名",
interval:5, // 步长
min:10, // 起始
max:50 // 终止
axisLabel: {
interval: 0, //强制显示所有标签
rotate: 30 //X轴标签旋转（顺时针计算）
},
},
yAxis : [{
type : 'value',
scale : true,
min:0, // 起始
max:5, // 终止
interval:1, // 步长
splitNumber : 5, //y轴值间隔数量
axisLine: {
show: false,
lineStyle: {
type: 'solid',
color: '#5A5A5A',//左边线的颜色
width: '1'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#5A5A5A',//坐标值得具体的颜色
}
},
axisTick:false,
splitLine: { //坐标轴在grid区域中的分隔线（网格中的横线）
show: true,
lineStyle: {
color: ['#5A5A5A'],
width: 1,
type: 'dashed',
}
},
splitArea: {//坐标轴在grid区域中的分隔区域（间隔显示网格区域）
interval: 1, //显示间隔的规律
show: true,
areaStyle: {//分隔区域的样式
color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
}
}
}],
# 常用方法
# echarts做飞线图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞线图</title>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
background-color:#2F4056;
}
</style>
</head>
<body>
<div id="chart-box" style="width:100%; height:100%;"></div>
<script type="text/javascript">
const chart = echarts.init(document.getElementById('chart-box'));
const xhr = new XMLHttpRequest();
xhr.open('get','https://geo.datav.aliyun.com/areas/bound/530000_full.json',true)
xhr.send(null)
xhr.onreadystatechange = () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
const data = JSON.parse(xhr.responseText);
console.log(Object.prototype.toString(data))
const coord = data.features.map(val => {
return {
name:val.properties.name,
value:val.properties.center
}
})
const lines_coord = [];
coord.forEach((v,index)=> {
index > 0 && lines_coord.push({
coords:[v.value,coord[0].value]
})
})
//地市取简称
data.features.forEach(v => {
v.properties.name = v.properties.name.indexOf('版纳')>-1 ?v.properties.name.substr(0,4) : v.properties.name.substr(0,2);
})
echarts.registerMap('yns', data);
const option ={
title: {
text: '云南省',
},
geo: {
map: 'yns',
zlevel: 10,
show:true,
layoutCenter: ['50%', '50%'],
roam: false,
layoutSize: "90%",
zoom: 1,
label: {
normal: {
show: true,
textStyle:{
fontSize:12,
color: '#43D0D6'
}
}
},
itemStyle: {
normal: {
color: '#062031',
borderWidth: 1.1,
borderColor: '#43D0D6'
}
},
emphasis: {
areaColor: '#FFB800',
label:{
show:false
}
}
},
series: [
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:8,
rippleEffect: {
period: 4, brushType: 'stroke', scale: 4
},
itemStyle:{
color:'#FFB800',
opacity:1
},
data:coord.slice(1)
},
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:12,
rippleEffect: {
period: 6, brushType: 'stroke', scale: 8
},
itemStyle:{
color:'#FF5722',
opacity:1
},
data:coord.slice(0,1)
},
{
type:'lines',
coordinateSystem:'geo',
zlevel: 15,
effect: {
show: true, period: 5, trailLength: 0, symbol: 'arrow', color:'#01AAED',symbolSize: 8,
},
lineStyle: {
normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}
},
data:lines_coord
}
]
}
chart.setOption(option);
chart.on('click', function (params) {
console.log(params);
});
} else {
alert(xhr.status);
}
}
</script>
</body>
# 使用背景图的柱状图
var tcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAACJCAYAAAD61ML1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiZTBiN2I3MC1mYjVkLTRjM2EtOTc2YS01Zjk2MmFlMDhlZjEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTM4OUE0OUJEMDRDMTFFRDk2MUVENTA5MzNGMDE3QUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTM4OUE0OUFEMDRDMTFFRDk2MUVENTA5MzNGMDE3QUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZTdhMTUyMzItZjRkOC1jNDQ2LWFiODctNDhmMDcwNTQ5ZDNiIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NjFkODU4MGMtMzY5Ny0yNjQzLWI4MmIt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"; // 请替换为您的图片路径
var min = 0.9;
var myChart = echarts.init(document.getElementById('container'));
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value',
min: min
},
series: [{
type: 'custom',
renderItem: function (params, api) {
var dataIndex = api.dataIndex;
var xValue = api.value(0);
var yValue = api.value(1);
var xCoord = api.coord([xValue, yValue])[0];
var yCoord = api.coord([xValue, yValue])[1];
var startYCoord = api.coord([xValue, min])[1];
var barWidth = api.size([1, 0])[0] * 0.3;
return {
type: 'group',
children: [
{
type: 'image',
style: {
x: xCoord - barWidth / 2,
y: yCoord,
width: barWidth,
height: startYCoord - yCoord,
image:tcon
}
}
]
};
},
data: [['A', 1.1], ['B', 1.12], ['C', 1], ['D', 0.99], ['E', 0.98]]
}]
};
myChart.setOption(option);