折线图
图表加载遇到问题
- 报类似的错误invalid dom
this.$nextTick(()=>{
// 这里面放获取dom 初始化echarts等等
)柱形图
- 柱形图中横坐标或者纵坐标 在放数据的数据的时候，会出现数据间隔出现的情形以及相关的解决方法
https://blog.csdn.net/qq_37138818/article/details/90714799
yAxis: {
type: \'category\',
inverse: true,
data: this.provinceList,
axisLabel: {
interval: 0 // 解决echarts柱状图x坐标或者y坐标 标签间隔显示的问题
},
axisLine: {
// y轴
show: false
},
axisTick: {
show: false // y轴刻度线
}
},- 柱形图中百分比的位置
label: {
normal: {
show: true,
position: \'insideLeft\', // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight(显示位置)
formatter: function(params) {
return params.data.percentage; // 显示后台返回的百分比
}
}
}- 柱形图中显示的百分比如何使用后台返回的百分比,具体可以参考https://blog.csdn.net/hudeyong926/article/details/99540666?ivk_sa=1024320u
// 显示网络请求 处理数据
this.provincePeopleNum.push({
value: parseInt(item.addressUNUm),
percentage: item.percentage
});
// 实例
label: {
normal: {
show: true,
position: \'insideLeft\', // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
formatter: function(params) {
// 这里可以打印一下params
return params.data.percentage; // 显示后台返回的百分比
}
}
}- 图例的位置以及文字样式
legend：{
orient:horizontal,
x:\'right\',(left right center)
y:\' center\', (left right center)
width:\'100\',
padding:[10, 30,0 0],
itemWidth:30,
textStyle:{
color:\'#000\',
},
}- 遇到多折线图折叠 出现各个点累加 去掉或者stack取不同的值就可以了
series: [
{
name: \'播放\',
type: \'line\',
stack: \'总量\',
data: [200, 1320, 1010, 340, 900, 2300, 2100],
symbol: \'none\',
itemStyle: { normal: { color: \'#158CFF\' } },
},
{
name: \'收益\',
type: \'line\',
stack: \'总量\',
data: [2620, 820, 1910, 2340, 2900, 2200, 2310],
symbol: \'none\',
itemStyle: { normal: { color: \'#FF850A\' } },
},
{
name: \'点赞\',
type: \'line\',
stack: \'总量\',
data: [1500, 2322, 2012, 1542, 1902, 1230, 2410],
symbol: \'none\',
itemStyle: { normal: { color: \'#FF5C5C\' } },
},
{
name: \'收藏\',
type: \'line\',
stack: \'总量\',
data: [1150, 1232, 2201, 1154, 2190, 1330, 2410],
symbol: \'none\',
itemStyle: { normal: { color: \'#27AA91\' } },
},
{
name: \'转发\',
type: \'line\',
stack: \'总量\',
data: [1150, 1232, 1201, 2154, 1190, 2330, 2410],
symbol: \'none\',
itemStyle: { normal: { color: \'#BF5CFF\' } },
},
],- 一些基础的设置,具体全面参考官方文档https://echarts.apache.org/zh/option.html#%2Fsearch%2Flegend
var option = {
title: {
text: '课程数据分析',
subtext: '这是副标题',
textStyle: {
// 设置标题的样式
fontSize: 22,
},
subtextStyle: { // 副标题样式
fontSize: 12,
fontWeight: 'normal'
}
},
tooltip: { // 提示框
trigger: 'item', // 触发类型
formatter: '{a} | {b} | {c}', // 注意这里的 a b c d 有确定的含义,这是链接 [https://blog.csdn.net/GGGyp/article/details/103170482]
// 或者另一种
formatter: function (params) {
console.log(params); // 打印数据,根据需求提取即可
}
},
grid: {
// echarts图表距离上右下左的位置
left: '3%',
right: '4%',
bottom: '7%',
containLabel: true, // grid区域是否包含坐标轴的刻度标签
},
legend: { // 图例
show: true,
x: 'center',
padding: [10, 10, 8, 0], // y:'bottom',
itemGap: 6, // 图例每项之间的间隔
bottom: -5, // 距离
borderRadius: 5, // 圆角半径，单位px
icon: 'circle', // 形状,可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
data: [
{name: '播放'},
{name: '收益'},
{name: '点赞'},
{name: '收藏'},
{name: '转发'},
{name: '购买'},
],
textStyle: {
// 图例的公用文本样式
color: '#000000',
// fontSize: 15
},
},
xAxis: ['dddd'],
yAxis: [
{
type: 'value',
name: '',
min: 0, // y轴的最大值和最小值
max: 3000,
},
],
toolbox: { // 工具栏组件
show: true,
},
calculable: true,
series: [
{
name: '播放',
type: 'line',
data: this.viewSum,
symbolSize: 6, // 图元的大小
itemStyle:
{
normal: {
color: '#158CFF', //改变折线点的颜色
lineStyle: {
color: '#158CFF', //改变折线颜色
width: 2,
},
},
},
},
{
name: '收益',
type: 'line',
data: this.earingsSum,
symbolSize: 6,
itemStyle: {
normal: {
color: '#FF850A', //改变折线点的颜色
lineStyle:
{
color:
'#FF850A', //改变折线颜色
width: 2,
},
},
},
},
{
name: '点赞',
type: 'line',
data: this.clickSum,
symbolSize: 6,
itemStyle:
{
normal: {
color: '#FF5C5C', //改变折线点的颜色
lineStyle:
{
color:
'#FF5C5C', //改变折线颜色
width: 2,
},
},
},
},
{
name: '收藏',
type: 'line',
data: this.collectSum,
symbolSize: 6,
itemStyle:
{
normal: {
color:
'#27AA91', //改变折线点的颜色
lineStyle:
{
color:
'#27AA91', //改变折线颜色
width:
2,
},
},
},
},
{
name: '转发',
type: 'line',
data: this.shareSum,
symbolSize: 6,
itemStyl: {
normal: {
color: '#BF5CFF', //改变折线点的颜色
lineStyle:
{
color:
'#BF5CFF', //改变折线颜色
width: 2,
},
},
},
},
],
};- 至于 柱形图中每个柱子之间的间隔问题
//间隔问题，还没有找到具体的有用的属性值,我通过调整grid中top和bottom值 尝试拉开了间隔
grid: {
top: \'5%\',
bottom: \'10%\'
}饼图(暂时没用过 以后补充)
关于echarts自适应问题
// 移动端自适应方法(尤其适应一个页面多echars)
mobileResize(flag) {
window.onresize = () => {
flag.resize();
};
}
// 举例
var chart = echarts.init(document.getElementById(\'main\'));
this.mobileResize(chart);echarts图表位置显示 \'-暂无数据-\'
// 调用接口 给echarts参数赋值
if (res.trendDate.length !== 0) {
// 再次调用 初始化echarts(获取dom 放echarts 这一堆)
this.dataTrend();
} else {
this.focusOnDataX = [];
// 显示--暂无数据--
const dom = document.getElementById(\'dataTrend\');
dom.innerHTML = \'暂无相关数据\';
dom.style.cssText =\'text-align:right; color: #999; border: none;line-height: 300px;\';
dom.removeAttribute(\'_echarts_instance_\');
}tab切换与echarts
- tab切换之后 右边echarts图表 压缩变形
// 暂时没有找到更好的解决办法
//防止切换视图时图表被压缩变形
setMychart(){
//原生js写法
//这是一个封装好的方法，兼容IE，第一个参数，element,第二个属性，css样式
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return document.defaultView.getComputedStyle(obj, null)[attr];
}
}
//获取父元素
let echarts = document.querySelector(\'.manuScriptFather\');
//获取父元素宽高
let echartsWidth = getStyle(echarts, \'width\');
let echartsHeight = getStyle(echarts, \'height\');
//获取图表元素
let myChart = document.querySelector(\'#manuScriptAnalysis\');
//将父元素宽高赋值给图表
myChart.style.width = echartsWidth;
myChart.style.height = echartsHeight;
}
css部分
.manuScriptFather {
height: 500px;
width: 405px;
}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)