echarts小贴士

生成模板

//body
<div style="width: 800px;height: 450px" id="RentalSaleChart" class="ec"></div>
//js
var   RentalSaleEcharts=echarts.init(
document.getElementById('RentalSaleChart')
);
    var RentalSaleOptions = {
    };
    RentalSaleEcharts.setOption(RentalSaleOptions);

鼠标放上去的提示

            tooltip: {
                show: true //显示提示框
                     },

legend

 legend: {
        left: 'center',
        top: 30,
        data: legendName,
       → textStyle: { 
            color: '#fff',
        },←//这里是改字体颜色

改数据颜色

        series: [{
            name: "已租",
            type: 'bar',
            stack: "xxx",
            data: ["10", "20","1","2","8","5"],
            //这个属性是改数据颜色的↓
            itemStyle:{
                normal:{
                    color:'#3abfd2'
               }
               }

x轴

        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,//这个是一格刻度线的长度，
                // {number}
                textStyle: {
                 color: 'rgba(255,255,255,0.7)',  //更改坐标轴文字颜色，y轴也一样
                    fontSize : 14      //更改坐标轴文字大小
                }
            },

y轴

        yAxis: {
            type: 'value',
            //这个是y轴轴线
            axisLine:{
                show:false
            },
            //这个是y轴突出来的准线
            axisTick:{
                show:false
            },
            //这个是自定义y轴刻度
            axisLabel: {
                formatter: function (value) {
                    var texts = [];
                    if (value == 0) {
                        texts.push('0吨');
                    } else if (value <= 1) {
                        texts.push('100吨');
                    } else if (value <= 2) {
                        texts.push('200吨');
                    } else if (value <= 3) {
                        texts.push('300吨');
                    } else if (value <= 4) {
                        texts.push('400吨');
                    }else {
                        texts.push('500吨');
                    }
                    return texts;
                }
            }
        },

工具箱

//反正都没啥用都删了叭
       toolbox: {
            right: 30,
            feature: {
                dataView: {
                    show: false,
                    readOnly: false
                },
                magicType: {
                    show: false,
                    type: ['line', 'bar']
                },
                restore: {
                    show: false
                },
                //这个是下载按钮
                saveAsImage: {
                    show: false
                }
            }
        },

总量

  series: [
        {
            name: '每月应收总额',
            type: 'line',
            stack: '总量',
            //这个属性↑是控制数据是否堆叠的如果删掉折线图就可以相交
            data: [120, 132, 101, 134, 90, 230, 210,330,421,521,23,123],
            itemStyle: {
                        //柱形图圆角，鼠标移上去效果，
                        //写法与css中的border-radius相同
                         normal: {
                              //柱形图圆角，初始化效果
                               barBorderRadius:[15, 15, 0, 0]
                         }
                    },
        },

关于echarts用了display：none就失去宽高的问题可以去这个大佬的贴看看
https://blog.csdn.net/chenxueshanblog/article/details/72461113

暂时这么多，好耶( •̀ ω •́ )y