图表混搭

折线图与柱状图

 

        var option = {  //指定图表的配置项和数据
            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
            tooltip: { trigger: 'axis' },
            legend: { data: ['降水量', '蒸发量'], left: 'center', top: 12 },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月',
                        '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {   //设置两个Y轴之1：降水量
                    type: 'value', name: '降水量（mL）',
                    min: 0, max: 250, 
                    interval: 50,//设置刻度之间的间隔
                    axisLabel: { formatter: '{value}ml ' }
                },
                {   //设置两个Y轴之2：蒸发量
                    type: 'value', name: '蒸发量（mL）', min: 0, max: 200,
                    position: 'right',  //设置y轴安置的位置
                    offset: 0,  //设置向右偏移的距离
                    axisLine: { lineStyle: { color: 'red' } },//设置坐标轴的颜色
                    axisLabel: { formatter: '{value}ml ' }
                }
            ],
            series: [
                {
                    name: '降水量', type: 'bar',
                    itemStyle: {  //设置柱状图颜色
                        normal: {
                            color: function (params) {
                                var colorList = [  //build a color map as your need
                                    '#fe9f4f', '#fead33', '#feca2b', '#fed728', '#c5ee4a',
                                    '#87ee4a', '#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8',
                                    '#4586d8', '#4f68d8', '#F4E001', '#F0805A', '#26C0C0'];
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    data: [50, 75, 100, 150, 200, 248, 220, 180, 155, 130, 90, 75]
                },
                {
                    name: '蒸发量', type: 'line',
                    yAxisIndex: 1,  //指定使用第2个y轴
                    itemStyle: { normal: { color: 'red' } },  //设置折线颜色
                    data: [58, 65, 90, 120, 130, 180, 150, 130, 125, 110, 150, 145]
                }
            ]
        };

 

     在yAxis数组中通过代码position:'right'指定y轴安置位置（如果没有指定那么默认位置是'left'）；在series数组中通过代码yAxisIndex:1指定使用第二给y轴（0表示第1个y轴，1表示第2个轴）

带水印的柱状图与饼图混搭

 

var builderJson = {
            "all": 10887,
            "charts": {  //各ECharts图表的json数据
                "地理坐标图": 3237, "路径图": 2164, "柱状图": 7561, "折线图": 7778,
                "饼图": 7355, "散点图": 2405, "K线图": 1842, "雷达图": 2090,
                "热力图": 1762, "矩形树图": 1593, "关系图": 2060, "盒须图": 1537,
                "平行坐标系": 1908, "仪表盘图": 2107, "漏斗图": 1692, "桑基图": 1568
            },
            "components": {  //各ECharts组件的json数据
                "地理坐标系组件": 2788, "标题组件": 9575, "图例组件": 9400,
                "提示组件": 9466, "直角坐标系组件": 9266, "图表标注组件": 3419,
                "图表标线组件": 2984, "时间线组件": 2739, "区域缩放组件": 2744,
                "视觉映射组件": 2466, "工具框组件": 3034, "极坐标系组件": 1945
            },
            "ie": 9743
        };
        var downloadJson = {  //各ECharts版本下载的json数据
            "完整版": 17365, "精简版": 4079,
            "常用版": 6929, "源代码版": 14890
        };
        var themeJson = {  //各ECharts下载的主题json数据
            "黑色主题": 1594, "信息主题": 925, "明亮主题": 1608,
            "罗马主题": 721, "马卡龙主题": 2179, "复古主题": 1982
        };
        var waterMarkText = 'ECharts';  //设置水印的字符
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = canvas.height = 100;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.globalAlpha = 0.08;
        ctx.font = '20px Microsoft Yahei';  //设置水印文字的字体
        ctx.translate(50, 50);  //设置水印文字的偏转值
        ctx.rotate(-Math.PI / 4);  //设置水印旋转的角度
        ctx.fillText(waterMarkText, 0, 0);  //设置填充水印
        var option = {  //指定图表的配置项和数据
            backgroundColor: { type: 'pattern', image: canvas, repeat: 'repeat' },
            tooltip: {},
            title: [{  //配置标题组件
                text: '在线构建次数',
                subtext: '总计 ' + Object.keys(builderJson.charts).reduce(function (all, key) {
                    return all + builderJson.charts[key];
                }, 0),
                x: '25%',
                textAlign: 'center'
            }, {  //配置标题组件
                text: '各图表组件的使用次数',
                subtext: '总计 ' + Object.keys(builderJson.components).reduce(function (all, key) {
                    return all + builderJson.components[key];
                }, 0),
                x: '25%', y: '53%',
                textAlign: 'center'
            }, {
                text: '各版本下载',
                subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
                    return all + downloadJson[key];
                }, 0),
                x: '75%', textAlign: 'center'
            }, {
                text: '主题下载',
                subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
                    return all + themeJson[key];
                }, 0),
                x: '75%', y: '50%',
                textAlign: 'center'
            }],
            grid: [{  //配置网格组件
                top: 50, width: '50%', bottom: '50%',
                left: 10, containLabel: true
            }, {
                top: '55%', width: '50%',
                bottom: 0, top:'60%', left: 10, containLabel: true
            }],
            xAxis: [{  //配置x轴坐标系
                type: 'value',
                max: builderJson.all,
                splitLine: { show: false }
            }, {
                type: 'value',
                max: builderJson.all,
                gridIndex: 1,
                splitLine: { show: false }
            }],
            yAxis: [{  //配置y轴坐标系
                type: 'category',
                data: Object.keys(builderJson.charts),
                axisLabel: { interval: 0, rotate: 20 },
                splitLine: { show: false }
            }, {
                gridIndex: 1,
                type: 'category',
                data: Object.keys(builderJson.components),
                axisLabel: { interval: 0, rotate: 20 },
                splitLine: { show: false }
            }],
            series: [{  //配置数据系列
                type: 'bar', stack: 'chart', z: 3,
                label: { normal: { position: 'right', show: true } },
                data: Object.keys(builderJson.charts).map(function (key) {
                    return builderJson.charts[key];
                })
            }, {
                type: 'bar', stack: 'chart', silent: true,
                itemStyle: { normal: { color: '#eee' } },
                data: Object.keys(builderJson.charts).map(function (key) {
                    return builderJson.all - builderJson.charts[key];
                })
            }, {
                type: 'bar', stack: 'component', xAxisIndex: 1, yAxisIndex: 1, z: 3,
                label: { normal: { position: 'right', show: true } },
                data: Object.keys(builderJson.components).map(function (key) {
                    return builderJson.components[key];
                })
            }, {
                type: 'bar', stack: 'component', silent: true,
                xAxisIndex: 1, yAxisIndex: 1,
                itemStyle: { normal: { color: '#eee' } },
                data: Object.keys(builderJson.components).map(function (key) {
                    return builderJson.all - builderJson.components[key];
                })
            }, {
                type: 'pie', radius: [0, '30%'], center: ['75%', '25%'],
                data: Object.keys(downloadJson).map(function (key) {
                    return {
                        name: key.replace('.js', ''),
                        value: downloadJson[key]
                    }
                })
            }, {
                type: 'pie', radius: [0, '30%'], center: ['75%', '75%'],
                data: Object.keys(themeJson).map(function (key) {
                    return {
                        name: key.replace('.js', ''),
                        value: themeJson[key]
                    }
                })
            }]
        };