echarts

echarts

$ npm i -S echarts

https://echarts.baidu.com/tutorial.html

https://www.echartsjs.com/api.html#echarts

工具欄

Toolbox

https://echarts.baidu.com/builder.html

https://echarts.baidu.com/echarts2/doc/example.html
https://echarts.baidu.com/echarts2/doc/example/bar1.html

https://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts3

pie

https://www.echartsjs.com/examples/editor.html?c=pie-rich-text

https://echarts.baidu.com/builder.html

var weatherIcons = {
    'Sunny': './data/asset/img/weather/sunny_128.png',
    'Cloudy': './data/asset/img/weather/cloudy_128.png',
    'Showers': './data/asset/img/weather/showers_128.png'
};

option = {
    title: {
        text: '天氣狀況統計',
        subtext: '虛構數據',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['西涼', '益州','兗州','荊州','幽州']
    },
    series : [
        {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:[
                {
                    value:1548,
                    name: '幽州',
//  sunny
                    label: {
                        normal: {
                            formatter: [
                                '{title|{b}}{abg|}',
                                '  {weatherHead|天氣}{valueHead|天數}{rateHead|佔比}',
                                '{hr|}',
                                '  {Sunny|}{value|202}{rate|55.3%}',
                                '  {Cloudy|}{value|142}{rate|38.9%}',
                                '  {Showers|}{value|21}{rate|5.8%}'
                            ].join('\n'),
                            backgroundColor: '#eee',
                            borderColor: '#777',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                title: {
                                    color: '#eee',
                                    align: 'center'
                                },
                                abg: {
                                    backgroundColor: '#333',
                                    width: '100%',
                                    align: 'right',
                                    height: 25,
                                    borderRadius: [4, 4, 0, 0]
                                },
                                Sunny: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Sunny
                                    }
                                },
                                Cloudy: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Cloudy
                                    }
                                },
                                Showers: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Showers
                                    }
                                },
                                weatherHead: {
                                    color: '#333',
                                    height: 24,
                                    align: 'left'
                                },
                                hr: {
                                    borderColor: '#777',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                value: {
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'left'
                                },
                                valueHead: {
                                    color: '#333',
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'center'
                                },
                                rate: {
                                    width: 40,
                                    align: 'right',
                                    padding: [0, 10, 0, 0]
                                },
                                rateHead: {
                                    color: '#333',
                                    width: 40,
                                    align: 'center',
                                    padding: [0, 10, 0, 0]
                                }
                            }
                        }
                    }
                },
                {value:535, name: '荊州'},
                {value:510, name: '兗州'},
                {value:634, name: '益州'},
                {value:735, name: '西涼'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

orient: 'vertical',

https://www.echartsjs.com/gallery/editor.html?c=pie-legend&edit=1&reset=1

demo

color: ['#7cb5ec', "#f15c80", "#fdec6d", '#d48265', "#90ed7d",'#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

showEchartBarChart(datas = {}) {
        let {
            series,
            xAxis,
            legends,
        } = datas;
        let yAxis = [];
        // legends.forEach((name, i) => {
        //     yAxis.push({
        //         type: "value",
        //         name,
        //     });
        // });
        // console.log(`names =`, JSON.stringify(names, null, 4));
        let dom = document.getElementById("bar-container");
        let barChart = echarts.init(dom);
        // let app = {};
        let option = {
            title: {
                text: "資訊類型數量統計圖",
                subtext: "數據來自 gildata 稽覈平臺",
                left: "center"
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 座標軸指示器，座標軸觸發有效
                    type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
                },
            },
            toolbox: {
                show : true,
                feature : {
                    //  mark : {show: true},
                    // dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    // restore : {show: true},
                //  saveAsImage : {show: true}
                }
            },
            color: ['#7cb5ec', "#f15c80", "#fdec6d", '#d48265', "#90ed7d",'#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            // color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            calculable : true,
            legend: {
                data: legends,
                bottom: 10,
            },
            xAxis: [
                {
                    type : 'category',
                    data : xAxis,
                }
            ],
            // yAxis: yAxis,
            yAxis: [
                {
                    type: "value",
                    name: "資訊數量(條)",
                }
            ],
            // yAxis: [
            //     {
            //         type : 'value',
            //         name : '水量',
            //         axisLabel : {
            //             formatter: '{value} ml'
            //         }
            //     },
            //     {
            //         type : 'value',
            //         name : '溫度',
            //         axisLabel : {
            //             formatter: '{value} °C'
            //         }
            //     }
            // ],
            series: series,
        };
        if (option && typeof option === "object") {
            barChart.setOption(option, true);
        }
    },
    showEchartPieChart(datas = []) {
        let names = [];
        if (datas.length) {
            // names = Object.keys(datas);
            datas.forEach(obj => {
                let {
                    name,
                } = obj;
                names.push(name);
            });
        }
        // console.log(`names =`, JSON.stringify(names, null, 4));
        let dom = document.getElementById("container");
        let myChart = echarts.init(dom);
        let app = {};
        let option = null;
        option = {
            title: {
                text: "資訊類型佔比統計圖",
                subtext: "數據來自 gildata 稽覈平臺",
                left: "center"
            },
            tooltip : {
                trigger: "item",
                // formatter: "{a} <br/>{b} : {c} ({d}%)",
                formatter: `
                    <span data-indictor="pointer"></span>
                    {b}<br/>數量: {c},
                    <br/>佔比: ({d}%)<br/>
                `,
                // formatter: function(e) {
                //     console.log(`formatter =`, e);
                //     console.log(`formatter.color =`, e.color);
                //     return `<span data-indictor="pointer" style="color: ${e.color};"></span>{b}<br/>數量: {c},<br/>佔比: ({d}%)<br/>`;
                // },
            },
            color: ['#7cb5ec', "#f15c80", "#fdec6d", '#d48265', "#90ed7d",'#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            legend: {
                // orient: "vertical",
                // top: "middle",
                bottom: 10,
                left: "center",
                data: names,
            },
            series : [
                {
                    type: "pie",
                    radius : "65%",
                    center: ["50%", "50%"],
                    selectedMode: "single",
                    data: datas,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)"
                        }
                    }
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    },