目录
对应网址链接
多颜色时设置rich
formatter: function (item) {
if (item.data.name) {
return "{a|" + item.data.name + "}\n\n{c|" + item.data.value + "}"
} else {
return "{b|" + item.data.name + "}\n\n{c|" + item.data.value + "}"
}
},
rich: {
a: { color: '#85FD9F' },
b: { color: '#EAE538' },
c: { color: '#fff' }
}
注意:formatter 为提示词,可以有两种格式,直接赋值与函数格式,字符串模板与回调函数返回的字符串均支持用 \n
换行,函数格式必须 return ,返出的数据就是他的展示数据,可通过 rich 设置不同色值,以用于对 formatter 不同颜色的设置
lcharts 设置 beforeRender 函数
1 首先需要先配置函数
<lcharts-line
type="basicLine" //类型
:data="data_0" //数据
:columns="columns_0" //数据映射方式
:mIdOption="mIdOption_0" //配置项
:mId="3" //风格id
:beforeRender="beforeRender" />
2 设置 beforeRender
methods: {
beforeRender(options) {
console.log(options) //lacherts的实例
}
}
引入配置一个Echarts
1 设置一个div,用来放置Echarts
<div id="canvas" ref="echarts"></div>
这个盒子必须有宽高,设置为百分百就可以
2 在可以获取dom的钩子 mounted 中,初始化一个Echarts
this.echarts = this.WIDE_LIB.echarts.init(this.$refs.echarts);
//或者
let echarts = this.WIDE_LIB.echarts
let chart;
if (this.$refs.echarts) {
chart = echarts.init(this.$refs.echarts);
chart.clear()
}
3 配置完数据后,对Echarts进行赋值
this.echarts.setOption(this.option);
//或者
chart.setOption(option)
注意:两种方式用哪一种,具体看自己的设置而定
ECharts饼图
设置鼠标滑过无反应 | series 中设置 hoverAnimation:false |
展示为南丁格尔图 | series 中设置 roseType:“radius” | "area" |
设置圆的半径与内半径 | series 中设置 radius : [5%,120], ['内半径','半径'] |
ECharts设置缩放自适应(限定范围)
第一种方法,在 mounted 中添加以下代码
setTimeout(() => { // 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById('图表所在的div盒子'));
});
第二种方法,适用于页面含有多个图表的情况 推荐使用
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});