echarts问题总结
1.点击事件简单应用
const _this = this// vue中参数传递
this.chartOne = echarts.init(document.getElementById('chartOne'));
this.chartTow.setOption(optionOne); //设置option
this.chartTow.getZr().on('click', (params) => {// getZr()
if (!params.target) { // 点击在了空白处，做些什么。
_this.isdel = true;// 作为普通变量传给内部
}
});
// zrender 事件与echarts 事件不同。前者是当鼠标在任何地方都会被触发，
// 而后者是只有当鼠标在图形元素上时才能被触发。
myChart.getZr().on('click', function (event) {
// 该监听器正在监听一个`zrender 事件`。
});
myChart.on('click', function (event) {
// 该监听器正在监听一个`echarts 事件`。
});
// zrender事件，我们就可以实现 “监听空白处的事件”
myChart.getZr().on('click', function (event) {
// 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
if (!event.target) {
// 点击在了空白处，做些什么。
}
});2.vue 单个页面循环多个echars
// js
// 循环获取roseChart
for(var i=0;i {
if (!params.target) { // 点击在了空白处，做些什么。
_this.isdel = true;
}
});
} 3.给柱状图的柱子添加颜色
optionOne.series.forEach(item => {
item['itemStyle'] = {
normal: {
color: function() {
return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
}
}
}
})4.用函数给颜色定值
{
color: (()=>{
let res = [];
var len = 100;
for (var i = 0, size = len; i < size; i++) {
res.push('#' + Math.random().toString(16).substr(2, 6).toUpperCase());
}
return res;
})(),
}
// 函数的样式不同
{
color: function() {
return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
}
}5.将返回的数据填充到表格
line或bar data对应方法中的res.push([result[i].regionName, result[i].nums]); 填充方式不同
init(param) {
this.chartcity = echarts.init(this.$refs.cityDom);
listCitys(param).then(res => {
this.chartData = res.rows;
let result = this.chartData;
this.optioncity = {
textStyle: {
color: '#ffffff'
},
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#ffffff',
width: 1, //这里是为了突出显示加上的
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#ffffff',
width: 1, //这里是为了突出显示加上的
}
}
},
series: [{
data: (() => {
let res = [];
let len = result.length;
for (let i = 0, size = len; i < size; i++) {
res.push([result[i].regionName, result[i].nums]);
}
return res;
})(),
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: {
normal: {
color: function() {
return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
}
}
}
}]
};
window.onresize = this.chartcity.resize;
this.chartcity.setOption(this.optioncity); //设置option
})
}pie res.push({ name: result[i].className, value: result[i].nums });
init(param) {
this.chartPie = echarts.init(this.$refs.pieDom);
listChartPies(param).then(res => {
this.chartData = res.rows;
let result = this.chartData;
this.optionPie = {
title: {
left: 'center',
},
legend: {
bottom: 'bottom',
orient: 'vertical',
textStyle: {
color: '#ffffff'
},
},
color: ['#5f9dff', '#6be1c1', '#ffed79', '#ee5959', '#7d92d4', '#00ff7f'],
tooltip: {
trigger: 'item'
},
series: [{
center: ["50%", "40%"],
// name: '访问来源',
type: 'pie',
radius: '50%',
data: (() => {
let res = [];
let len = result.length;
for (let i = 0, size = len; i < size; i++) {
res.push({
name: result[i].className,
value: result[i].nums
});
}
return res;
})(),
}]
};
window.onresize = this.chartPie.resize;
this.chartPie.setOption(this.optionPie); //设置option
})
}6.修改弹出提示
tooltip: {
trigger: 'item',
formatter: (params) => {
return params.marker + params.name + ': ' + params.value + '元';
}
},7.legend分为左右两份布局
// 后端返回数据。。。
let legendData = ["刑满释放人员","吸毒人员","宗教极端人员","收押人员","收教人员","收监人员","易感染人员","涉众","涉军","涉核参战人员","涉访人员","社区矫正","精神病人员","艾滋病人员","解救人员","连管人员","邪教人员",]
// echarts部分。。。。
legend: [
{
icon: "bar",
textStyle: {
color: "#2efcfa",
},
data: legendData.slice(0, 8),
left: "left",
bottom: 'bottom',
},
{
icon: "bar",
textStyle: {
color: "#2efcfa",
},
data: legendData.slice(8, 16),
right: "right",
bottom: 'bottom',
}
],
8.显示的字太长
formatter: (params) => {
if (params.length > 5) {
return params.substring(0, 5) + '...'
} else {
return params
}
},9.echarts设置滑过可点击区域时将鼠标变为小手样式（一般与区域点击事件结合使用）
// 方法1
let that = this;
this.chartPie.getZr().on('mousemove', param => {
that.chartPie.getZr().setCursorStyle('pointer')
});
// 方法2
10.echarts获取点击位置
this.chartbar.getZr().on('mousemove', param => {
let pointInPixel = [param.offsetX, param.offsetY];
if (!_this.chartbar.containPixel('series', pointInPixel)) {
_this.chartbar.getZr().setCursorStyle('pointer');
}
});11.echarts使用getZr()点击事件获取柱状图数据
chart.getZr().on('click', (params) => {
let pointInPixel = [params.offsetX, params.offsetY];
if (chart.containPixel('grid', pointInPixel)) {
let pointInGrid = chart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = chart.getOption(); //图表object对象
console.log(handleIndex, seriesObj);
};
});12 echarts适用饼图直观显示数值方式
series: [{
name: title,
type: 'pie',
radius: '50%',
data: data,
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine: { show: true }
}
}
}]13.echarts 面积图颜色渐变
areaStyle为面积参数
series: [{
name: '本月',
smooth: true,
data: data,
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#5f9dff' // 100% 处的颜色
}, {
offset: 1, color: '#0c1268' // 0% 处的颜色
}],
global: false // 缺省为 false
}
},
color: '#5f9dff', //线条颜色
},]14.柱状图颜色渐变
series: [{
type: 'bar',
data: dataBar,
barWidth: 8,
itemStyle: {
normal: {
// X轴是数据轴
//柱形图圆角，初始化效果
barBorderRadius: [0, 15, 15, 0],
// 线性渐变色
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#006da8' },
{ offset: 1, color: '#31b7ff' },
])
// Y轴是数据轴
// barBorderRadius: [15, 15, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: '#006da8' },
// { offset: 1, color: '#31b7ff' },
// ])
},
},
label: {
show: true,
position: 'right',
color: '#FFFFFF'
},
}]
// 圆心渐变
new echarts.graphic.RadialGradient(0.5,0.5,1.0, [
{ offset: 0, color: '#00ffff' },
{ offset: 1, color: '#55aaff' },
])
// 圆心渐变
color: {
type: 'radial', // 径向渐变
x: 0.5, // 圆心点x轴，0.5为柱状图宽度中心
y: 0.5, // 圆心点y轴，0.5为柱状图高度中心
r: 0.5, // 半径
colorStops: [
{
offset: 0, color: 'red' // 0%处的颜色为红色
},
{
offset: 1, color: 'blue' // 100%处的颜色为蓝
}
]
}
// 线性渐变
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'red' // 0%处的颜色为红色
}, {
offset: 1,
color: 'blue' // 100%处的颜色为蓝
}]
}15.Echarts数据可视化legend图例属性设置
legend={
show:true, //是否显示
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
width:"auto", //图例宽度
height:"auto", //图例高度
orient:"horizontal", //图例排列方向
align:"auto", //图例标记和文本的对齐,left,right
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
itemGap:10, //图例每项之间的间隔
itemWidth:25, //图例标记的图形宽度
itemHeight:14, //图例标记的图形高度
formatter:function (name) { //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
return 'Legend ' + name;
},
selectedMode:"single", //图例选择的模式,true开启,false关闭,single单选,multiple多选
inactiveColor:"#ccc", //图例关闭时的颜色
textStyle:mytextStyle, //文本样式
data:['类别1', '类别2', '类别3'], //series中根据名称区分
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //阴影的模糊大小
};16.vue引用和使用echarts4/echarts5的差别
4版本
import echarts from 'echarts'5版本
import * as echarts from 'echarts'
// 或者
const echarts = require('echarts');17.echarts,除了点击legend,其他 部分可以触发跳转
this.chart.getZr().on('click', (params) => {
if (!params.target) {
this.$router.push({
path: path
});
}
});18. series-pie. startAngle
起始角度，支持范围[0, 360]。可以控制饼图的开始角度,防止标签溢出图表
19. echarts y轴的字左对齐
grid 下的 left: '-15%'
yAxis.axisLabel 下的margin: 220, 刻度标签与轴线之间的距离
yAxis.axisLabel.textStyle: { align: 'left' //** }
通过这个这三个原始联调配置
20:设置markPoint
series: [
{
name: 'test',
data: [['02月',100],['03月',97]],
type: 'line',
markPoint: {
data: [{
xAxis: '02月', // x轴坐标
yAxis: '100', // y轴坐标
value: '100', // y轴的值
}]
}
}
]