echarts 技巧自己的一些记录

时间:2021-12-08 01:30:02

1、不要输出 window["echarts"].init(chart) ,会卡死。

let chart = document.getElementById("chart_id");//chartid为自定义charts的id
if (chart != null) {
  let myChart = window["echarts"].init(chart);
  //console.log("myChart = ", myChart)//千万别输出,会卡死
}

2、angularjs中绑定echarts,建议使用ng-repeat绑定数组,否则动态切换echarts会没有效果。

<div id="chart_my" style="min-height: 300px;" class="sam-Echarts" ng-if="vm.charts!=null" ng-repeat="option in vm.charts" sam-Echarts="option">
</div>
// 为echarts自定义的directives -- samEcharts
export default class directive implements ng.IDirective {
static $instance = (): ng.IDirective => {
return new directive();
};
constructor() {
}
scope = {
samEcharts: "=",
samMychart: "="
};
restrict = 'AE';
replace = true;
link(scope: ng.IScope, element: ng.IRootElementService, attrs: any, ctrl: any) {
if (scope.samEcharts) {
var myChart = window["echarts"].init(element[0]);
myChart.setOption(scope.samEcharts);
window.addEventListener("resize", x => {
myChart.resize();
});
scope.$on("onShrinkNav", x => {
myChart.resize();
});
if (scope.samMychart) {
scope.samMychart = myChart;
}
}
};
}
class Controller {
constructor() {
}
}

3、富文本,a|表示自定义的标签,|{b}|{c}表示文本内容,貌似c为name,b为value,a为series?

label: {
normal: {
formatter: '{a|{c}}\n{b|{b}}\n{hr|}\n\n\n',
rich: {
a: {
fontSize: 18,
lineHeight: 25,
align: 'left'
},
b: {
align: 'left',
fontSize: 12,
lineHeight: 12,
color: "#999999"
},
hr: { //下划线
borderColor: 'auto',
width: '105%',
borderWidth: 1,
height: 0,
margin: [10, 0]
}
}
}
}

4、图表内部可拖动:dataZoom的type=inside则内部可拖动,为slider则外部有滚动条

// 拖动
dataZoom: [
{
type: 'inside',
// throttle: '50',
minValueSpan: 5,
maxValueSpan: 5,
start: 50,
end: 100
}
]
// 底部拖动条
dataZoom: xData.length > 6 ? [{
type: 'slider',
show: true,
xAxisIndex: [0],
bottom: 55,
left: 30,
right: 30,
backgroundColor: "#f4f4f4", //组件的背景颜色
fillerColor: "#CEF0FE", //选中范围的填充颜色。
dataBackground: {
lineStyle: {
show: false,
opacity: 0
},
areaStyle: {
show: false,
opacity: 0
}
},
textStyle: {
color: "transparent"
},
borderColor: "#fff",
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '300%',
// handleSize: 0,
handleStyle: { color: "#CEF0FE" },
height: "8px",
// start: ydata.length < 10 ? 0 : Math.floor((ydata.length - 10) * 100 / ydata.length),
start: (xData.length - 6) * 100 / xData.length,
end: 100 //初始化滚动条
}] : false,
// 另外附加一个如果自定义了左右切换控件,可以自定义拖动位置
let chart = document.getElementById("chart_id");//chartid为自定义charts的id
if (chart != null) {
let myChart = window["echarts"].init(chart);
// //获得图表数据数组下标
// let startValue = myChart.getModel().option.dataZoom[0].startValue;
// let endValue = myChart.getModel().option.dataZoom[0].endValue;
// //获得起止位置百分比
// var startPercent = myChart.getModel().option.dataZoom[0].start;
let endPercent = myChart.getModel().option.dataZoom[0].end;
// console.log("myChart = ", startPercent, endPercent, startValue, endValue);
let option = this.charts[0];
if (endPercent == 100) {
option.dataZoom[0].start = 0;
option.dataZoom[0].end = 49;//定义为50的话貌似有点偏差
}
else {
option.dataZoom[0].start = 50;
option.dataZoom[0].end = 100;
}
myChart.setOption(option, true);
}

5、x轴文字显示不全的3种解决思路 https://blog.csdn.net/kebi007/article/details/68488694

6、文字换行 https://www.cnblogs.com/zjjDaily/p/8022944.html

7、自定义legendName 图形样式,基本的就看官网吧,博主用的echart版本是2.*,但调试时却不能像官网那样直接用没有圆形的横线代表折线,下图是官网实例 ↓↓↓

echarts 技巧自己的一些记录

在series中添加属性 symbol:'none' 即可。但在官网3.0和最近新出的4.0版本却也都不行,难道是因为主题???耗了大半天时间最终只好投降使用svg文字,然后设定自己的itemWidth和itemHeight。

icon: "path://M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"

效果如下 ↓↓↓

echarts 技巧自己的一些记录

8、双Y轴左右两侧对齐轴线。参考:https://www.jianshu.com/p/5123433d36f8

  思路是设定最大值max和间隔区间 interval,因为interval包含小数时会被强行自适应导致不对齐,所以要将max设定为能被分割的条数整除,当然从图表样式来说这个也应该设定的比正常最大max再稍大一些,要是按照最大max则必然有一个节点是顶到max值的,所以博主给max加了相应区间范围。

// 小编分了5段,所以设定能被5整除:

    if (_max % 5 != 0) {
_max += 5 - (_max % 5);
}
_max = this.setMax(_max); // setMax,设定比实际max再大半个度:
setMax(max) {
if (max > 5 && max < 10) {
max = 10;
}
else if (max < 100 && max >= 10) {
max += 5;
}
else if (max < 1000 && max >= 100) {
max += 50;
}
else if (max < 10000 && max >= 1000) {
max += 500;
}
else if (max < 100000 && max >= 10000) {
max += 5000;
}
else if (max >= 100000) {
max += 50000;
}
return max;
}

9、饼图(或环图)设置 label.formatter 在data个数较多时不推荐设置换行,否则会出界并与 legend 交叉。如下图↓↓↓

echarts 技巧自己的一些记录

10、设置字体大小不推荐使用字符串px,应使用数字number,否则会导致图表两侧与页边距产生错误差。

textStyle: {
color: "#A0A5B0",
fontSize: 10,
fontFamily: "PingFangSC-Regular"
}