echarts.js初步

时间 2019-12-09

标签 echarts.js echarts 初步栏目 JavaScript 繁體版

原文原文链接

相信很多开发者会遇到开发数据显示效果的状况，这种状况下echarts.js将成为咱们很是好用的工具，下面就经过一个简单的demo来了解一下它吧javascript

这是echarts.js的中文开发文档地址http://echarts.baidu.com/option.html#xAxis.nameTextStylehtml

其运行代码大体以下java

<body>
        <div id="main" style="height: 400px;width: 800px;"></div>
    </body>
    
    
    <script src="js/echarts.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        myChart.title = '多 Y 轴示例';

        var colors = ['#5793f3', '#d14a61', '#675bba'];
//        var colors = ['red', 'yellow', 'black'];
        
        
        var option = {
                color: colors,
            
                tooltip: {
                    trigger: 'axis',
                    //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    //'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                    axisPointer: {
                        type: 'cross',
                        snap:true,
                    }
                },
                grid: {
                    right: '20%' //设置grid 组件离容器右侧的距离。
                },
                legend: {
                    data:['蒸发量','降水量','平均温度']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true,//能够保证刻度线和标签对齐
                        },
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '蒸发量',
                        min: 0,
                        max: 250,
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: colors[0]//坐标轴颜色
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'//坐标轴文字格式化
                        }
                    },
                    {
                        type: 'value',
                        name: '降水量',
                        min: 0,
                        max: 250,
                        position: 'right',//降水量的位置在右边，
                        offset: 80,//向右偏移
                        axisLine: {
                            lineStyle: {
                                color: colors[1]//坐标轴颜色
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '温度',
                        min: 0,
                        max: 25,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: colors[2]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name:'蒸发量',
                        type:'bar',
                        barCategoryGap:'50%',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    },
                    {
                        name:'降水量',
                        type:'bar',
                        yAxisIndex: 1,
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name:'平均温度',
                        type:'line',
                        yAxisIndex: 2,
                        data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };

        
        myChart.setOption(option);
    </script>

效果以下echarts

怎么样，效果不错吧，这只是一个简单的demo，欢迎大神交流沟通哈工具