Echarts和highCharts图表使用总结(附AntV)
Eharts:
1.给y轴上间隔线设置成虚线
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLine: {show: false},
axisTick: {
show: false //y轴上不显示刻度
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
rotate: 0,
margin: 20,
textStyle: { // 其他属性默认使用全局文本样式，详见TEXTSTYLE
color: 'rgba(0,0,0,0.65)'
}
},
splitLine:{//间隔线
show:true,
lineStyle:{
type:'dashed',//设置成虚线
color:'#E8E8E8'
}
}
},
复制代码
2.echarts的x轴和y轴都隐藏
option = {
xAxis: {
type: 'category',
show:false
},
yAxis: {
type: 'value',
show:false
},
series: [{
symbol: "none",//隐藏折线上的小圆点
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
复制代码
3.设置图表的上下间隔线是实线，其他是虚线
//把xAxis设为数组，写两个x轴，其他的横向间隔线在y坐标轴设置
xAxis: [{
type: 'value',
name: '',
splitLine: {
show: false,
},
},{
type: 'category',
}],
复制代码
4.散点图中的气泡图：标记最大值和作标示线(业务需求：筛选出不一样类别中最大的那个值并作特殊样式处理，好比加个图片代表是最大值)
series: [{
markPoint:{//在最大值处加一个皇冠
symbol : 'image://./static/img/icon-1/symbols-logo-1.png',
symbolSize : 10,
symbolOffset:[0,'-50%'],
effect : {
show : true
},
label:{
color:'#FFF',
fontStyle:14,
align:'center',
verticalAlign:'center',
position: ['50%', '100%']
},
data:[{
name: '最大值',
type: 'max',
valueIndex:1
}],
},
markLine:{ //作标记线
symbol: 'none',
lineStyle: {
color: '#5B6DC8',
},
label: {
normal: {
position: "end",
backgroundColor: '#101641',
padding: [10, 20],
borderRadius: 4,
color: '#FFF',
formatter: '{b}',
},
},
animation: false,
data: [{
name: 'y轴平均值',
yAxis: avgY
},{
name: 'x轴平均值',
xAxis: avgX
}],
}
}]
复制代码
同上：标出最大值(在不一样的类别添加标注点，这种写法只能在一个类别中添加一个标注点，能够经过在markPoint中的data设置数组来添加多个标注点，不过每一个标注点的样式只能相同，要想在不一样的类别中添加多个标注点且每一个标注点样式不一样，能够用label属性)
var makeMarkPoint = function (index, url, size, offset, coord) {
option.series[index].markPoint = {
symbol: 'image://' + url, //图片url
symbolSize: size, //设置标注图片的大小
symbolOffset: offset, //图片位置
label: { //标注文字样式
color: '#FFF',
fontStyle: 30,
align: 'center',
verticalAlign: 'middle',
position: ['50%', '150%'],
formatter: '{b}'
},
data: [{ //须要进行标注的坐标
name: domainDataIndex[index],
coord: coord
}],
}
}
makeMarkPoint(index1,'./static/img/top1.png', 40, [0, '-100%'], domainDataCoord[0])
复制代码
var data = [[28604,77,17096869,'餐饮',1990],[31163,77.4,27662440,'零售',1990],[1516,68,1154605773,'餐饮',1990]]
//在同一类别下添加多个标注点
var array1 = [];
var array2 = [];
var array3 = [];
for (var j = 0; j < dataArr.length; j++) { //把数据放在一个加入了图片url的数组中
if (max1 == dataArr[j]) {
datatop3Arr[j].push('./static/img/top1.png');
array1.push(datatop3Arr[j])
}
if (max2 == dataArr[j]) {
datatop3Arr[j].push('./static/img/top2.png');
array2.push(datatop3Arr[j])
}
if (max3 == dataArr[j]) {
datatop3Arr[j].push('./static/img/top3.png');
array3.push(datatop3Arr[j])
}
}
var poptotalarray = [];
poptotalarray = poptotalarray.concat(array1, array2, array3)
var nameforindex = function (str) {
if (str == '餐饮') return 0
if (str == '零售') return 1
if (str == '儿童') return 2
if (str == '体验') return 3
if (str == '其余') return 4
}
var yetaiArray1 = []
var yetaiArray2 = []
var yetaiArray3 = []
var yetaiArray4 = []
var yetaiArray5 = []
for (var j = 0; j < poptotalarray.length; j++) {
var index = nameforindex(poptotalarray[j][4]);
var pop = {
name: poptotalarray[j][3],
coord: [poptotalarray[j][0], poptotalarray[j][1]]
}
if (index == 0) yetaiArray1.push(pop);
if (index == 1) yetaiArray2.push(pop);
if (index == 2) yetaiArray3.push(pop);
if (index == 3) yetaiArray4.push(pop);
if (index == 4) yetaiArray5.push(pop);
}
复制代码
用label设置图片
（max1,max2,max3为最大的三个值）
option.series[i].label = {
show: true,
position: 'insideTop',//设置位置在中上
formatter: function (value) {
var val = value.data[3];
var strs = val.split(''); //字符串数组
var str = '';
for (var i = 0, s; s = strs[i++];) { //文本超过三个字就换行
str += s;
if (!(i % 3)) str += '\n';
}
if (parseInt(value.data[2]) == max1) {
return [
'{topimg1|}',
'{value|' + str + '}',
].join('\n');
} else if (parseInt(value.data[2]) == max2) {
return [
'{topimg2|}',
'{value2|' + str + '}',
].join('\n');
} else if (parseInt(value.data[2]) == max3) {
return [
'{topimg3|}',
'{value3|' + str + '}',
].join('\n');
}
return ""
},
offset: [0, -18],
textBorderColor: 'transparent',
rich: {
value: {
lineHeight: 15,
align: 'center',
color: '#FFF',
fontWeight: 'bold',
fontSize: 16,
padding: [-30, 0, 0, 0]
},
value2: {
lineHeight: 15,
align: 'center',
color: '#FFF',
fontWeight: 'bold',
fontSize: 14,
padding: [-20, 0, 0, 0]
},
value3: {
lineHeight: 15,
align: 'center',
color: '#FFF',
fontWeight: 'bold',
fontSize: 12,
padding: [-10, 0, 0, 0]
},
topimg1: {
height: 40,
align: 'center',
backgroundColor: {
image: './static/img/top1.png'
},
},
topimg2: {
height: 40,
align: 'center',
backgroundColor: {
image: './img/top2.png'
},
width: 30,
height: 30
},
topimg3: {
height: 40,
align: 'center',
backgroundColor: {
image: './static/img/top3.png'
},
width: 20,
height: 20
}
}
};
复制代码
在AntV中给label文字格式化设置图片css
.label('name', {
labelLine: false, // 不显示文本的链接线
offset: 30, // 文本距离图形的距离
htmlTemplate: (text, item, index) => {
const point = item.point; // 每一个弧度对应的点
let percent = point['percent'];
percent = (percent * 100).toFixed(2) + '%';
return '<span class="title" style="display: inline-block;width: 50px;">' + text + '</span><br><span style="color:' + point.color + '">' + percent + '</span>'; // 自定义 html 模板
}
});
复制代码
5.标记点设置成圆环
option.series[0].markPoint = {
symbolSize: 15,
symbol: 'circle',
itemStyle: {
normal: {
borderColor: '#45DD54',//环的颜色
color: "#1B235B",//环内的背景色
borderWidth: 3, //环的宽度
label: {
show: true,
backgroundColor: '#45DD54',
padding: [6, 20],
borderRadius: 4,
color: 'white',
lineHeight: 20,
position: 'top',
formatter: '{title|{b}}\n{num|{c}} %',
rich: {
title:{
fontWeight: 'bold',
color: '#fff',
fontSize:16
},
num: {
fontWeight: 'bold',
color: '#fff',
fontSize:20
},
}
}
},
},
effect: {
show: true,
shadowBlur: 0
},
data: [{
name: '昨日增加',
value: pointY,
xAxis: dateData[20],
yAxis: pointY
}, ],
},
复制代码
6.给标记点设置背景图片（适用于背景是对话框有箭头的样式）
itemStyle: {
normal: {
label: {
show: true,
backgroundColor: {
image:'./static/img/symbols-up.png',//设置背景图
},
}
}
}
复制代码
7.柱状图的柱子设置不一样的颜色
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
color: function(val){
if(val.value == 220){ //位于某个特定值的柱子设置一个特殊的颜色
return "red"
}
return "green";
},
data:[10, 52, 200, 334, 390, 330, 220]
}
]
复制代码
8.漏斗图左部分文字左对齐
option = {
grid: {
left: 100
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function(a,ix){
return ix;
}
},
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
xAxis: {
show: false
},
series: [
{
name: 'City Gamma',
type: 'bar',
data: [0, 0, 0]
},
{
name: '实际',
type: 'funnel',
left: '10%',
width: '80%',
maxSize: '80%',
label: {
normal: {
position: 'inside',
formatter: '{c}%',
textStyle: {
color: '#fff'
}
},
emphasis: {
position:'inside',
formatter: '{b}实际: {c}%'
}
},
itemStyle: {
normal: {
opacity: 0.5,
borderColor: '#fff',
borderWidth: 2
}
},
data: [
{value: 30, name: '访问'},
{value: 10, name: '咨询'},
{value: 5, name: '订单'},
{value: 50, name: '点击'},
{value: 80, name: '展示'}
]
}
]
};
复制代码
9.散点图设置点均匀分布
是不是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。html
{
scale:true
}
复制代码
也能够设置x轴和y轴的最小最大值，达到本身想要的效果node
10.设置echarts图表隔一段时间刷新
setInterval(function(){
refresh.call(me);
}, echartsRefreshInterval);
var refresh = function(){
var div = this.node.root.insertBefore(document.createElement("div"), this.node.echarts);
$(div).css({
position: "absolute",
top: "0",
left: "0",
right: "0",
bottom: "0"
});
this.dom.removeDomNode(this.node.echarts);
this.node.echarts = div;
this.eChart = echarts.init(this.node.echarts);
this.eChart.setOption(this.currData, true);
};
复制代码
11.气泡图数据多，气泡重叠在一块儿的问题
能够统一给全部气泡x轴的数据增长20，帮助分散数组
12.二级图例
<div
class="item"
v-for="(item, index) in arr"
:key="index"
:class="{ isSelected: index == indexSelected }"
@click="filter(item, index)"
>
<div
class="item-chunk"
:style="{ background: `${indexSelected == index && item.isSelect ? item.color : '#999'}` }"
></div>
<div class="item-title">{{ item.title }}</div>
</div>
复制代码
filter(code, index) {
// myChart 的参数
code.isSelect = !code.isSelect
this.indexSelected = index
var options = this.chartColumn.getOption()
var selectLegend = options.legend
for (var i = 0; i < this.arr.length; i++) {
if (i !== index) this.arr[i].isSelect = false
}
for (const key in selectLegend) {
if (code.isSelect && selectLegend[key].id === code.title) {
selectLegend[key].show = true
} else {
selectLegend[key].show = false
}
}
this.chartColumn.setOption(options, true) // 从新渲染该图片
},
复制代码
highCharts
1.设置y轴间隔线为虚线
yAxis: {
gridLineDashStyle: 'ShortDash',//网格线样式
},
复制代码
2.dataLabels线太长致使图片宽度小时，label自动变省略号看不到
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontSize: '12px',
fontWeight: 'normal'
},
distance:10 //设置distance改变指示线的长度
},
showInLegend: true,
startAngle: 0, // 圆环的开始角度
endAngle: 360, // 圆环的结束角度
center: ['50%', '50%'],
size:this.pieSize
}
},
复制代码
3.在y轴添加标记线（好比预警线）bash
plotLines: [
{
color: "#BFBFBF",
dashStyle: "dash",
width: 1,
value: 24304,
label: {
useHTML:true,
text: "预警线<br/>30万",
align: "right",
style: {
color: "#919191",
fontSize: "10px"
},
x:10
},
zIndex:9999
}
]
复制代码
相关文章
- 1. ECharts与Highcharts图表比较
- 2. Highcharts图表使用
- 3. echarts图表的常用属性总结
- 4. highcharts封装使用总结
- 5. echarts使用总结
- 6. [总结]SSH+Highcharts动态图表
- 7. echarts和highcharts比较
- 8. 如何使用 antv 图表组件
- 9. 小程序 图表 antv f2 的使用
- 10. 使用chart和echarts制做图表
- 更多相关文章...
- • Redis链表（linked-list）数据结构和常用命令 - Redis教程
- • Redis基本安装和使用 - Redis教程
- • Composer 安装与使用
- • 算法总结-双指针
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章