插件 (echarts、swiper)

一、echarts（4）

title　　　  标题(大小标题)

grid　　     图的位置，大小等(地图的话，geo > grid)

xAxis　　   x坐标轴  （axisTick: x轴刻度线、splitLine: x间隙、axisLine: x轴线、axisLabel: x坐标轴刻度标签）

yAxis　　   y坐标轴  （axisTick: y轴刻度线、splitLine: y间隙、axisLine: y轴线、axisLabel: y坐标轴刻度标签, inverse: true(颠倒排序)）

 

legend　　 图例组件(series有多个对象时有用)

        selectedMode      禁止点击隐藏饼图

toolbox　　工具（下载canvas图片等）

tooltip　　  鼠标悬停提示

 

series　　各图标类型

　　　bar.series.label.show  展示柱状图顶部数字

color　　　　　　　　全局颜色组

backgroundColor　　全局背景颜色

textStyle　　　　　　全局的字体样式

 (G2、Highcharts、google echarts)

1.normal:静态的时候显示的默认样式
2.emphasis:鼠标移入动态的时候显示的默认样式
normal:{
　　show:
    
　　textStyle:{
　　　　color:'red'
　　}
    formatter: '{a}{c}{b} : \n{d}%',

},
emphasis:{
　　color:'green'
}

---

 例子：

1.

ECharts

①  radar图:

　　splitNumber (从圆点到最外有多少个圆圈)

　　splitLine （圆圈的样式）

　　axisLine (从圆点到最外直线的样式)

　　splitArea (从圆点到最外圈层的样式)

　　splitLine 的type只能一种，但能画两个

　　

 

（微信小程序版）

② 饼图:

　　1.中间挖空： o.series[0].radius: ["40%", "70%"] / "70%"  (镂空和不镂空)

　　2.饼图排序/角度： series.hoverOffset  |  series.startAngle

　　3.扇形鼠标移动的高亮和高亮偏

　　  series.hoverAnimation

　　  series.hoverOffset

　　4.自动高亮selected属性

　　  {value: 135, name: "商品售卖", selected: true},

       5. 圆心：series: [{center: ['75%', '50%'],}]

③ 折线图:

　　1.刻度线朝向 xAxis.axisTick.inside: true

④ 柱状图:

　　1.柱状图每个都不同颜色

series : [
    {
        type:'bar',
        itemStyle: {                            //  图形样式
            normal:{
                color: function (params){
                    let aDataMachine1 = [];
                    var colorList = [];
                    for(let i=0; i<aDataMachine.length; i++){
                        aDataMachine1.push(aDataMachine[i])
                    }
                    aDataMachine1.sort(function (a,b){
                        return b.number-a.number
                    });
                    for(let i=0; i<aDataMachine.length; i++){
                        if (aDataMachine[i].number == aDataMachine1[0].number) {
                            colorList.push('rgb(0,255,255)');
                        } else if(aDataMachine[i].number == aDataMachine1[1].number) {
                            colorList.push('rgb(42,170,227)');
                        } else {
                            colorList.push('rgb(195,229,235)')
                        }
                    }
                    return colorList[params.dataIndex];
                }
            },
        },
    }
],

 　　2.排序

　　  inverse: true(x/y轴加属性)

　　3.控制柱状图的间距

　　  最好用grid.height/width动态修改;barCategoryGap是根据div宽高适配的，除非barGap不设置，barCategoryGap就可以很好生效，柱本身的宽度自适应

　　4.横着的柱状图顶部对齐用grid.top

 

⑤.个性图

 

 

 

 

 

 

 

 

---

二、swiper（3）

三、有赞vue组件

四、lucky-canvas：【大转盘 / 九宫格 / bingo机】抽奖插件

五、h5-Dooring：低代码做h5页面

六、right-menu