Echarts 相关问题

Echarts 问题汇总？！（就写了两个）

---

1. formatter不调用问题

tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' ,
             // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
        if(params.length > 1){
        return `${params[0].name}${"<br />"}
                ${params[0].marker}${params[0].seriesName} : ${(params[0].value).toLocaleString()}${"<br />"}
                ${params[1].marker}${params[1].seriesName} : ${params[1].value.toLocaleString()}`;
        }else{
            return `${params[0].value.toLocaleString()}`
        }
    }  
    
},

以下是我引入options的方式

const options = JSON.parse(JSON.stringify(cashFlowOptions.options))

发现oprions只能拿到除函数之外的属性，原来反序列化的时候把函数丢了
接下来说说为什么要序列化和反序列化：

const myString = {name: 'dola', 
				  age: 18, 
				  skill: function(e){console.log(e);}}
const myArray = ['ni',2,{age: 12, skill: function(e){console.log(e);}}]
// 序列化
const Astring = JSON.stringify(myString)
// 反序列化
const Bstring = JSON.parse(Astring)
console.log(Astring)
// "{\"name\":\"dola\",\"age\":18}"
console.log(Bstring)
// [object Object] {
//  age: 18,
//  name: "dola"
//}
console.log(JSON.stringify(myArray)) // "[\"ni\",2,{\"age\":12}]"

序列化:

简单来看将对象数组转换成一个字符串，实则转换为一个信息流，方便数据的存储和传递

存储：减少内存浪费，节约资源（还需要进一步探究）
传递：两个进程进行通信的时候，数据都会转为二进制序列的形式在网络上传送发送方需要把这个对象转换为字节序列，才能在网络上传送；接收方则需要把字节序列再恢复为对象。（深拷贝引用类型的数据）

传递的例子：

拿select单选框为例

const obj = {city_code: 123, build_code: 789, build_name:'dasha'}
// 想要同时拿到city_code，build_code，
const newObj = JSON.stringify(obj)
<Selet.Option key={newObj} value={newObj} onChange={(val)=>{console.log(JSON.parse(val))}}>{obj.build_name}<Selet.Option>
// 这时就能拿到完整的obj对象了

总结

一定要看好吧👌：https://blog.csdn.net/usstmiracle/article/details/95500722 https://juejin.cn/post/6844904117417017352

2. 如何控制Echarts柱子展示的个数

首先明确这两个属性 决定了能看到的第一个数据和最后一个数据

dataZoom: [{
start: 10,
end: 60
}]

start–>end是100份通过计算data.length/100得到一个数据的长度来给start和end赋值，从而控制首页展示的数量从第几天看展示几天其他的滚动查看

inCashOption.dataZoom[0].start = start
inCashOption.dataZoom[0].end = end