Echarts作图之柏拉图

Posted 2020-10-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts作图之柏拉图相关的知识，希望对你有一定的参考价值。

Echarts版本：2.2.7

技术分享

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="echarts/echarts.js"></script>
    <script type="text/javascript">
    window.onload = function() {
        require([
            ‘echarts‘,
            ‘echarts/chart/bar‘,
            ‘echarts/chart/line‘,
        ], function(ec) {
            var chartDom = document.getElementById("dv");
            console.log(chartDom);
            var myChart = ec.init(chartDom);
            var colors=["red","blue","green","black","orange","purple"]

            option = {
                title: {
                    text: ‘测试‘,
                },
                tooltip: {
                    trigger: ‘axis‘,
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
                    },
                    formatter: function(params) {
                        return params[0].name + ‘<br/>‘ +
                            params[0].seriesName + ‘ : ‘ + params[0].value + ‘<br/>‘ +
                            params[1].seriesName + ‘ : ‘ + (params[1].value + params[0].value);
                    }
                },
                legend: {
                    selectedMode: false,
                    data: [‘Acutal‘, ‘Forecast‘]
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [{
                    type: ‘category‘,
                    data: [‘top1‘, ‘top2‘, ‘top3‘, ‘top4‘, ‘top5‘, ‘top6‘],
                    splitLine:false
                    //data:[]
                },{
                    type: ‘category‘,
                    show:false,
                    boundaryGap : false,
                    data: [‘Cosco‘, ‘CMA‘, ‘APL‘, ‘OOCL‘, ‘Wanhai‘, ‘Zim‘,"333"],
                    splitLine:false
                }],
                yAxis: [{
                        type: ‘value‘,
                        boundaryGap: [0, 0.1],
                        splitLine:false
                    },
                    {
                        type: ‘value‘,
                        name: ‘温度‘,
                        axisLabel: {
                            formatter: ‘{value} %‘
                        },
                        splitLine:false
                    }
                ],
                series: [{
                        name: ‘Acutal‘,
                        type: ‘bar‘,
                        //barGap:‘10%‘,
                        barCategoryGap: ‘0%‘,
                        itemStyle: {
                            normal: {
                                color: function(obj){
                                	if(obj.dataIndex>=0){
                                		return colors[obj.dataIndex];
                                	}
                                },
                                barBorderColor: ‘tomato‘,
                                barBorderWidth: 1,
                                barBorderRadius: 2,
                                label: {
                                    show: true,
                                    position: ‘insideTop‘
                                }
                            }
                        },
                        data: [300, 200, 180, 150, 120, 50]
                    },
                    {
                        name: ‘Forecast‘,
                        type: ‘line‘,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: [0, 30,50, 68, 83, 95,100 ]
                    }

                ]
            };


            myChart.setOption(option);
        })
    }
    </script>
</head>

<body>
    <div id="dv" style="width:900px;height: 600px"></div>
</body>

</html>

以上是关于Echarts作图之柏拉图的主要内容，如果未能解决你的问题，请参考以下文章

python 柏拉图制作

柏拉图时期的idea最接近的含义是

Django博客来访人员地域分布大数据可视化---echarts绘图geoip2获取地理位置

javascript之原型（prototype）

高数概念的思考