百度图表插件echart简单应用，简单配置一些要显示的样式及种类

最新推荐文章于 2024-04-30 16:57:21 发布

anda9128

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LChenglong/p/7117796.html

版权

从echart官网下载js，然后引入jq即可运行。足够简单应用了

关键词：echart控制：图标标题、数据标题、折线图、柱状图切换按钮、恢复刷新图表按钮、保存为图片按钮、坐标系控制、坐标数据、坐标倾斜角度、刻度位置、要显示的标线（平均值、最大值、最高点）、折线颜色、折线点颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>折线图</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/echarts.js"></script>
    </head>
    <body>
        <div id="chart_box" style="width: 100%;height:400px;margin:0 auto;"></div>
    </body>
    
    <script>
         // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart_box'));

        // 指定图表的配置项和数据
        option = {
                title: {
                    text: '图表标题',//图表标题　　　　
                    subtext: '近一周推广数据'//数据标题
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['日平均点击量','最高点击量']
                },
                toolbox: {
                    show:true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        //magicType: {type: ['line', 'bar']},//折线图、柱状图切换
                        //restore: {},//恢复，即刷新图表
                        //saveAsImage: {}//保存为图片
                    }
                },
                grid:{//直角坐标系控制
                    left:50,//grid 组件离容器左侧的距离
                    top:70,
                    right:40,
                    bottom:50,
                },
                xAxis:  {    //设置横坐标
                    type: 'category',
                    axisLabel: {//横坐标的控制
                        show:true,//是否显示横坐标数据
                        rotate: 30,//坐标的倾斜角度
                        inside:false,//刻度是否朝内
                        margin:8,//标尺与轴线的距离，默认8
                        },
                    boundaryGap: false,
                    data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08']
                },
                yAxis: {    //设置纵坐标
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        rotate: 30,//坐标的倾斜角度
                        inside:true,//刻度是否朝内
                    }
                },
                series: [
                    {
                        name:'日平均点击量',
                        type:'line',
                        data:[400, 554, 1580, 1355, 1111, 1644, 1066],
                        markPoint: {
                            
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最高点击量',
                        type:'line',
                        data:[800, 1000, 1700, 1689, 1500, 1900, 2016],
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
            //                      label: {
            //                          normal: {
            //                              position: 'start',
            //                              formatter: '最大值'
            //                          }
            //                      },
            //                      type: 'max',
            //                      name: '最高点'
                                }]
                            ]
                        },

　　　　　　　　　　　　　　　 itemStyle: {
　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　color: '#00FF00',//改变折线点的颜色
　　　　　　　　　　　　　　　　　　　　lineStyle: { //改变折线颜色
　　　　　　　　　　　　　　　　　　　　　　color: '#00FF00'
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　},


                    }
                ]
        };




        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</html>

转载于:https://www.cnblogs.com/LChenglong/p/7117796.html

anda9128

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度图表插件echart简单应用，简单配置一些要显示的样式及种类

从echart官网下载js，然后引入jq即可运行。足够简单应用了关键词：echart控制：图标标题、数据标题、折线图、柱状图切换按钮、恢复刷新图表按钮、保存为图片按钮、坐标系控制、坐标数据、坐标倾斜角度、刻度位置、要显示的标线（平均值、最大值、最高点）、折线颜色、折线点颜色<!DOCTYPE html><html>...
复制链接

扫一扫