Echarts与LCharts

目录

对应网址链接 

多颜色时设置rich

lcharts 设置 beforeRender 函数

引入配置一个Echarts

ECharts饼图

ECharts设置缩放自适应（限定范围）

---

对应网址链接 

点击进入Echarts社区

点击进入Lcharts社区

多颜色时设置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)

注意：两种方式用哪一种，具体看自己的设置而定

使用vue-cli需要引入Echarts，点击查看具体方法

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();
});