echarts 参考资源

echarts 组件 ：
https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

阿里GeoJson
http://datav.aliyun.com/tools/atlas/#&lat=31.80289258670676&lng=104.2822265625&zoom=4


css 按钮

https://www.runoob.com/css3/css3-buttons.html


vue
https://www.runoob.com/vue2/vue-events.html

gallery
https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

https://www.makeapie.com/explore.html

异步获取数据

/**
 * 
 * @param {dom} _id 
 * @param {title} my_text 
 * @param {数据} _data
 * @see 格式: [{name:'显示的文字',value:'val'},{name:'显示的文字',value:'val'},..] 
 * @param {自定义颜色数组} color 
 */
function myPieColor(_id, my_text, _data, color) {
    var dom = document.getElementById(_id);
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: my_text,
            x: 'center'
        },

        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        //  自定义颜色
        color: color,

        series: [{
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: _data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

/**
 * 
 * @param {dom} id 
 * @param {title} title 
 * @param {x data 文字 Array} xdata 
 * @param {y data Array} data 
 * @param {自定义颜色} color 
 */
function initBar(id, title, xdata, data, color) {

    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            // 标题展示  包括是否居中等
            text: title,
            left: "center",
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            // 通过grid 调整 生成位置
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['潮汐 简单的幸福 白月光与朱砂痣',
                '四季予你＋送你一朵小红花', '难生恨 干饭人之歌 渐冷',
                '潮汐 失眠播报 醒不来的梦 烟雨成思 嘉宾'
            ],
            axisTick: {
                alignWithLabel: true
            },
			// 结局 x 轴太长 增加换行
            axisLabel: {
                interval: 0,
                formatter: function (value) {
                    debugger
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 6; //每项显示文字个数
                    var valLength = value.length; //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) //如果类目项的文字大于3,
                    {
                        for (var i = 0; i < rowN; i++) {
                            var temp = ""; //每次截取的字符串
                            var start = i * maxLength; //开始截取的位置
                            var end = start + maxLength; //结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    } else {
                        return value;
                    }
                }
            }
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{

            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 20, 34,30],
            itemStyle: {
                normal: {
                    color: function (params) {

                        var colorList = ['rgb(88,184,239)', 'rgb(65,96,239)', 'rgb(85,214,143)',
                            'green', '#7888df'
                        ]
                        return colorList[params.dataIndex]
                    }
                }
            },
        }]
    };

    option && myChart.setOption(option);

}

echarts中 设置颜色

itemStyle: {
    normal: {
    color: function(params) {
            //自定义颜色
            var colorList = [
            '#FE8463', 'red', 'green'
            ];
            return colorList[params.dataIndex]
        }
    }
}