[{"id":"bcb0874d-299b-448e-9552-9e9b25ef80dd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8ce3627e-9e58-471b-9133-4f135d191e7b","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ae60ae59-34f5-4f32-a8eb-243ed1457543","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3d4848c3-910f-4ffa-9153-60bb507334a9","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"133f4ca6-d951-4d65-a618-3dc6301266f7","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de62ec1c-813e-40b1-8160-a4cd109afe64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2426c71d-8332-4cbd-a436-1ec4f8666464","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2ce7b6b0-78aa-4e4b-bf8a-e4ba2f988298","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4706db46-0811-4652-8f59-1e0a1da84758","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8f1271bb-2cd9-4f39-9897-c15b239ee7ab","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"677e13a7-6f3e-449f-986c-2c3a26f8d54f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5e40f6dc-caec-49d7-a1d0-be65f06815ba","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2457f0e0-9e71-4860-a87d-065e0fb84f84","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5c67fd0-1145-482c-9113-97b492c44c18","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"a609a8fa-ab91-4c1d-a1c3-d209d0463303","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b4a9eb15-94e5-48df-b218-a24138f0cf9c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

Echarts自定义属性

功能概述

ECharts 插件与普通内置图表最大的不同点之一是可以自定义属性,使用 JS 代码进行深度定制。

image

自定义属性窗口编写区可直接编写JS代码,具体配置项与 ECharts 一致,请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title

窗口右上角的查看配置项按钮可查看产品图表中默认的配置项,当与定制内容重复时,以定制内容优先。

示例

例如使用JS 代码自定义属性修改了柱状图的显示样式,预览效果如下:

ECharts-柱状图

具体代码如下,供您参考。

let datas = []
let cates = []
let comebineData = []
const total = 70000
option.xAxis.data.forEach(item => {
    cates.push(item.value)
})

option.series[0].data.forEach(item => {
    datas.push(item.value)
})

cates.forEach((item, index) => {
    let tmp = { name: item, value: datas[index] }
    comebineData.push(tmp)
})

option = {
    backgroundColor: '#071347',
    xAxis: {
        max: total,
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    grid: {
        left: 80,
        top: 20, // 设置条形图的边距
        right: 80,
        bottom: 20
    },
    yAxis: [{
        type: "category",
        inverse: false,
        data: comebineData,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        }
    }],
    series: [{
        // 内
        type: "bar",
        barWidth: 18,

        legendHoverLink: false,
        silent: true,
        itemStyle: {
            normal: {
                color: function (params) {
                    var color;
                    console.log(params)
                    if (params.dataIndex == 0) {
                        color = {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "#EB5118" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#F21F02" // 100% 处的颜色
                            }
                            ]
                        }
                    } else if (params.dataIndex == 1) {
                        color = {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "#FFA048" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#B25E14" // 100% 处的颜色
                            }
                            ]
                        }
                    } else if (params.dataIndex == 2) {
                        color = {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "#F8E972" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#E5C206" // 100% 处的颜色
                            }
                            ]
                        }
                    } else {
                        color = {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "#1588D1" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#0F4071" // 100% 处的颜色
                            }
                            ]
                        }
                    }
                    return color;
                },
            }
        },
        label: {
            normal: {
                show: true,
                position: "left",
                formatter: "{b}",
                textStyle: {
                    color: "#fff",
                    fontSize: 14
                }
            }
        },
        data: comebineData,
        z: 1,
        animationEasing: "elasticOut"
    },
    {
        // 分隔
        type: "pictorialBar",
        itemStyle: {
            normal: {
                color: "#061348"
            }
        },
        symbolRepeat: "fixed",
        symbolMargin: 6,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [1, 21],
        symbolPosition: "start",
        symbolOffset: [1, -1],
        symbolBoundingData: this.total,
        data: comebineData,
        z: 2,
        animationEasing: "elasticOut"
    },
    {
        // 外边框
        type: "pictorialBar",
        symbol: "rect",
        symbolBoundingData: total,
        itemStyle: {
            normal: {
                color: "none"
            }
        },
        label: {
            normal: {
                formatter: (params) => {
                    var text;
                    if (params.dataIndex == 1) {
                        text = '{a|  100%}{g|  ' + params.data + '}';
                    } else if (params.dataIndex == 2) {
                        text = '{b|  100%}{g|  ' + params.data + '}';
                    } else if (params.dataIndex == 3) {
                        text = '{c|  100%}{g|  ' + params.data + '}';
                    } else if (params.dataIndex == 4) {
                        text = '{d|  100%}{g|  ' + params.data + '}';
                    } else if (params.dataIndex == 5) {
                        text = '{e|  100%}{g|  ' + params.data + '}';
                    } else {
                        text = '{f|  100%}{g|  ' + params.data + '}';
                    }
                    return text;
                },
                rich: {
                    a: {
                        color: 'red'
                    },
                    b: {
                        color: 'blue'
                    },
                    c: {
                        color: 'yellow'
                    },
                    d: {
                        color: "green"
                    },
                    e: {
                        color: "pink"
                    },
                    f: {
                        color: "purple"
                    },
                    g: {
                        color: "#ffffff"
                    }
                },
                position: 'right',
                distance: 0, // 向右偏移位置
                show: true
            }
        },
        data: datas,
        z: 0,
        animationEasing: "elasticOut"
    },
    {
        name: "外框",
        type: "bar",
        barGap: "-120%", // 设置外框粗细
        data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
        barWidth: 25,
        itemStyle: {
            normal: {
                color: "transparent", // 填充色
                barBorderColor: "#1C4B8E", // 边框色
                barBorderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                    // 标签显示位置
                    show: false,
                    position: "top" // insideTop 或者横向的 insideLeft
                }
            }
        },
        z: 0
    }
    ], dataZoom: [
        {
            type: "slider",
            show: true,
            xAxisIndex: [0],
            endValue: 50000,
            startValue: 0
        }
    ]
};



return option