本文已参与「新人创作礼」活动，一起开启掘金创作之路。
本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一：自动滚动效果，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="echBox" style="width: 800px; height: 400px"></div>
<script
src="../lib/echarts/echarts.min.js"
type="text/javascript"
charset="utf-8"
></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("echBox"));
option = {
grid: {
left: "5%",
right: "5%",
bottom: "5%",
top: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
},
dataZoom: [
//Y轴滑动条 如果是X轴滚动条 修改yAxisIndex为xAxisIndex
{
type: "slider", //滑动条
show: true, //开启
yAxisIndex: [0, 1],
// left: "10%", //滑动条位置
start: 0, //初始化时，滑动条宽度开始标度
end: 30,
width: "10",
fillerColor: "red",
handleSize: 0,
borderColor: "transparent",
backgroundColor: "transparent", //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
},
{
type: "inside",
yAxisIndex: [0, 1],
zoomOnMouseWheel: false, //滚轮是否触发缩放
moveOnMouseMove: true, //鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
],
backgroundColor: "rgb(20,28,52)",
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(228,228,228,0.2)",
type: "dashed",
},
},
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: [
"大米",
"玉米",
"蔬菜",
"鸡蛋",
"坚果",
"大米",
"玉米",
"蔬菜",
"鸡蛋",
"坚果",
"大米",
"玉米",
"蔬菜",
"鸡蛋",
"坚果",
"大米",
"玉米",
"蔬菜",
"鸡蛋",
"坚果",
],
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
boundaryGap: false,
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12",
},
},
data: [
100, 200, 300, 400, 500, 100, 200, 300, 400, 500, 100, 200, 300,
400, 500, 100, 200, 300, 400, 500,
],
},
],
series: [
{
name: "金额",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgb(57,89,255,1)",
},
{
offset: 1,
color: "rgb(46,200,207,1)",
},
]),
},
},
barWidth: 20,
data: [
100, 200, 300, 400, 500, 100, 200, 300, 400, 500, 100, 200, 300,
400, 500, 100, 200, 300, 400, 500,
],
},
{
name: "背景",
type: "bar",
barWidth: 20,
barGap: "-100%",
data: [
500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500,
500, 500, 500, 500, 500, 500, 500,
],
itemStyle: {
normal: {
color: "rgba(24,31,68, 0)",
},
},
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var timeOut = "";
autoMove();
document.getElementById("echBox").onmouseenter = () => {
stop();
};
document.getElementById("echBox").onmouseleave = (e) => {
autoMove();
let myChartOption = myChart.getOption();
endVal = myChartOption.dataZoom[0].end;
startVal = myChartOption.dataZoom[0].start;
};
//自动滚动
var startEnd = 30,
endVal = 30,
startVal = 0;
function autoMove() {
timeOut = setInterval(() => {
if (endVal == 100) {
endVal = 30;
startVal = 0;
} else {
endVal = endVal + 1;
startVal = startVal + 1;
}
myChart.dispatchAction({
type: "dataZoom",
dataZoomIndex: [0, 1],
start: startVal,
end: endVal,
});
}, 200);
}
//停止滚动
function stop() {
clearInterval(timeOut);
}
</script>
</body>
</html>
echarts知识点
@TOC
保证每次重复渲染
if(document.getElementById('hjczlEcharts4').getAttribute('_echarts_instance_')){
document.getElementById('hjczlEcharts4').removeAttribute('_echarts_instance_');
}
不显示，宽度为0 解决办法：
setTimeout(function () {
var dnysEcharts4 = echarts.init(document.getElementById('hjczlEcharts4'));
dnysEcharts4.setOption(option, true);
},200);
调整echarts表格的位置
grid:{
x:25,
y:45,
x2:5,
y2:20,
borderWidth:1
},
echarts 随屏幕大小改变大小chart.resize()
解决echarts图表 y轴名称，太长隐藏显示的问题
当完成时我发现有些页面y轴文字特别长，并且由于我设置了containLabel: true，
给一个固定12的字数限制，超出部分以省略号代替，这样就不会造成图形范围忽大忽小了。
axisLabel: {
color: "#000",
interval: 0,
formatter: function(value) {
if (value.length > 12) {
return value.substring(0, 12) + "...";
} else {
return value;
}
}
},
解决提示框超出屏幕
tooltip: {
trigger: "item",
confine:true,
formatter: "{a} <br/>{b} : {c}人 ({d}%)"
},
x轴名称太长，旋转或者竖着显示
旋转
axisLabel: {
interval:0,
rotate:40
}
interval： 可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推 rotate： 标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度
竖着显示：
axisLabel: {
interval: 0,
formatter:function(value) {
return value.split("").join("\n");
}
}
图表点击事件
竖图表
this.ecDom.setOption(option);
let myChart= this.ecDom
myChart.getZr().off('click');
myChart.getZr().on('click', params => {
const pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
}
})
横图表
this.ecDom.setOption(option);
let myChart= this.ecDom
myChart.getZr().off('click');
myChart.getZr().on('click', params => {
const pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[1]
}
})
function initDyhjEch1(id) {
if (document.getElementById(id).getAttribute('_echarts_instance_')) {
document.getElementById(id).removeAttribute('_echarts_instance_');
}
var myChart1 = echarts.init(document.getElementById(id));
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
name:"年",
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0d4fe1'
}, {
offset: 1,
color: 'rgba(13, 79, 225,0)'
}])
},
}]
};
myChart1.setOption(option);
myChart1.resize()
}
