Echarts:
1. Set the spacer line on the Y-axis to a dashed line
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLine: {show: false},
axisTick: {
show: false}, axisLabel: {// Axis text label, see axis. AxisLabel show:trueRotate: 0, margin: 20, textStyle: {// Rotate: 0, margin: 20, textStyle: {// rotate: 0, margin: 20, textStyle: {// rotate: 0, margin: 20, textStyle: {// rotate: 0, margin: 20, textStyle: 0'rgba (0,0,0,0.65)'}, splitLine:{// splitLine show:true,
lineStyle:{
type:'dashed',// set to the dashed line color:'#E8E8E8'}}},Copy the code2. The X and y axes of the Echarts are hidden
option = {
xAxis: {
type: 'category',
show:false
},
yAxis: {
type: 'value',
show:false
},
series: [{
symbol: "none",// Hide dots on the polyline data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}};Copy the code3. Set the upper and lower spacing lines to solid lines and the rest to dashed lines
// Set xAxis to an array, write two x axes, and the rest of the horizontal spacing lines set xAxis to the y axes: [{type: 'value',
name: ' ',
splitLine: {
show: false,}}, {type: 'category',}],Copy the code4. Bubble diagram in the scatter diagram: mark the maximum value and mark the line (business requirements: select the maximum value in different categories and make special style processing, such as adding a picture to indicate the maximum value)
Series: [{markPoint:{// add a symbol at the maximum value:'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: 'Maximum'.type: 'max'ValueIndex :1}],}, symbol: {// symbol:'none',
lineStyle: {
color: '#5B6DC8',
},
label: {
normal: {
position: "end",
backgroundColor: '# 101641',
padding: [10, 20],
borderRadius: 4,
color: '#FFF',
formatter: '{b}',
},
},
animation: false,
data: [{
name: 'Mean value on the Y-axis',
yAxis: avgY
},{
name: 'Average value of the X-axis',
xAxis: avgX
}],
}
}]
Copy the codeSame as above: Mark out the maximum (in different categories to add annotations, this method can only be added in the a category a marked point, can be set by the data in the markPoint array to add multiple marked point, but the style of each marked point can only be the same, if you want to add multiple tagging in different categories points and each annotation style is different, You can use the label attribute.)
var makeMarkPoint = function (index, url, size, offset, coord) {
option.series[index].markPoint = {
symbol: 'image://'+ url, // image url symbolSize: size, // set the image size symbolOffset: offset, // image position label: {// image style color:'#FFF',
fontStyle: 30,
align: 'center',
verticalAlign: 'middle',
position: ['50%'.'150%'],
formatter: '{b}'}, data: [{// name: domainDataIndex[index], coord: coord}],}}'./static/img/top1.png', 40, [0, '100%'], domainDataCoord[0])
Copy the codeVar data = [[28604,77,17096869,'11'31163, 1990], [,77.4, 27662440,'22'1516, 1990], [,68,1154605773,'33'Var array1 = []; var array2 = []; var array3 = [];for(var j = 0; j < dataArr.length; J++) {// put the data in an array with the image urlif (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 == '11') return 0
if (str == '22') return 1
if (str == '33') return 2
if (str == '44') return 3
if (str == '55') 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);
}
Copy the codeSet the image with label
(max1,max2,max3) Option. series[I]. Label = {show:true,
position: 'insideTop'// Set the location of the formatter in the middle:function (value) {
var val = value.data[3];
var strs = val.split(' '); // String array var STR =' ';
for(var i = 0, s; s = strs[i++];) {// if the text is more than three words, it will be newline;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
}
}
};
Copy the codeSet the image for label text formatting in AntV
.label('name', {
labelLine: falseHtmlTemplate: (text, item, index) => {const point = item.point; // The point corresponding to each radianlet percent = point['percent'];
percent = (percent * 100).toFixed(2) + The '%';
return ' ' + text + '</span><br><span style="color:' + point.color + '" >' + percent + '</span>'; // Customize the HTML template}});Copy the code5. Set the marking point as a ring
option.series[0].markPoint = {
symbolSize: 15,
symbol: 'circle',
itemStyle: {
normal: {
borderColor: '#45DD54'// the color of the ring:"#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
}, ],
},
Copy the code6. Set a background image for the marker (if the background is a dialog box with an arrow)
itemStyle: {
normal: {
label: {
show: true,
backgroundColor: {
image:'./static/img/symbols-up.png',// Set the background image},}}}Copy the code7. Color the columns in the bar chart
series : [
{
name:'Direct access'.type:'bar',
barWidth: '60%',
color: function(val){
if(val.value == 220){// Set a special color for columns at a particular valuereturn "red"
}
return "green";
},
data:[10, 52, 200, 334, 390, 330, 220]
}
]
Copy the code8. Left-align the text on the left of the funnel plot
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: 'real'.type: 'funnel',
left: '10%',
width: '80%',
maxSize: '80%',
label: {
normal: {
position: 'inside',
formatter: '{c}%',
textStyle: {
color: '#fff'
}
},
emphasis: {
position:'inside',
formatter: '{b} = {c}%'Border-color: 0; border-color: 0; border-color: 0; border-color: 0; border-color: 0;'#fff',
borderWidth: 2
}
},
data: [
{value: 30, name: ' '},
{value: 10, name: ' '},
{value: 5, name: ' '},
{value: 50, name: ' '},
{value: 80, name: ' '}]}]};Copy the code9. The scatter diagram sets the points evenly distributed
Whether it is out of the zero value ratio. When set to true, the coordinate scale does not force a zero scale. It is useful in scatter plots with double numerical axes.
{
scale:true
}
Copy the codeYou can also set the minimum and maximum values of the x and y axes to achieve the desired effect
10. Set the Echarts chart to refresh at intervals
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);
};
Copy the code11. The problem of overlapping bubbles due to the large number of bubble charts
The x axis data of all bubbles can be uniformly added by 20 to help dispersion
12. Secondary legend
<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>
Copy the codeFilter (code, index) {// myChart parameter code.isselect =! code.isSelect this.indexSelected = index var options = this.chartColumn.getOption() var selectLegend = options.legendfor (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) // re-render the image},Copy the codehighCharts
1. Set the Y-axis spacer line to a dashed line
yAxis: {
gridLineDashStyle: 'ShortDash',// grid line style},Copy the code2. DataLabels line is too long, so when the image width is small, the label automatically changes to ellipses
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontSize: '12px',
fontWeight: 'normal'}, distance:10 // Set distance to change the length of the indicator line}, showInLegend:true, startAngle: 0, // endAngle: 360, // endAngle: center: ['50%'.'50%'],
size:this.pieSize
}
},
Copy the code3. Add marking lines (such as early warning lines) on the Y-axis
plotLines: [
{
color: "#BFBFBF",
dashStyle: "dash",
width: 1,
value: 24304,
label: {
useHTML:true,
text: "Early warning line
300,000",
align: "right",
style: {
color: "# 919191",
fontSize: "10px"
},
x:10
},
zIndex:9999
}
]
Copy the code