ECHART新学

来源：互联网发布：半条命1网络电影编辑：程序博客网时间：2024/06/06 02:13

<!DOCTYPE html><html lang="zh-cn">  <head>    <meta charset="utf-8">    <title>ECharts</title>  </head>  <body>    <div id="main" style="height:800px;width:1000px;"></div>        <!-- ECharts单文件引入 -->    <script src="./build/dist/echarts.js"></script>    <script type="text/javascript">    var timeTicket;     // 路径配置      require.config({          paths: {              echarts: './build/dist'          }      });        // 使用        require(            [                'echarts',                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载                'echarts/chart/line' ,'echarts/chart/wordCloud' ,// 使用柱状图就加载bar模块，按需加载            ],            function (ec) {                // 基于准备好的dom，初始化echarts图表                var myChart = ec.init(document.getElementById('main'));                               var option = {    tooltip : {        trigger: 'axis'    },    legend: {        data:['蒸发量','降水量','最低气温','最高气温']    },    toolbox: {        show : true,        feature : {            mark : {show: true},            dataView : {show: true},            magicType : {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true}        }    },    xAxis : [        {            type : 'category',            position: 'bottom',            boundaryGap: true,            axisLine : {    // 轴线                show: true,                lineStyle: {                    color: 'green',                    type: 'solid',                    width: 2                }            },            axisTick : {    // 轴标记                show:true,                length: 10,                lineStyle: {                    color: 'red',                    type: 'solid',                    width: 2                }            },            axisLabel : {                show:true,                interval: 'auto',    // {number}                rotate: 45,                margin: 8,                formatter: '{value}月',                textStyle: {                    color: 'blue',                    fontFamily: 'sans-serif',                    fontSize: 15,                    fontStyle: 'italic',                    fontWeight: 'bold'                }            },            splitLine : {                show:true,                lineStyle: {                    color: '#483d8b',                    type: 'dashed',                    width: 1                }            },            splitArea : {                show: true,                areaStyle:{                    color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']                }            },            data : [                '1','2','3','4','5',                {                    value:'6',                    textStyle: {                        color: 'red',                        fontSize: 30,                        fontStyle: 'normal',                        fontWeight: 'bold'                    }                },                '7','8','9','10','11','12'            ]        },        {            type : 'category',            data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']        }    ],    yAxis : [        {            type : 'value',            position: 'left',            //min: 0,            //max: 300,            //splitNumber: 5,            boundaryGap: [0,0.1],            axisLine : {    // 轴线                show: true,                lineStyle: {                    color: 'red',                    type: 'dashed',                    width: 2                }            },            axisTick : {    // 轴标记                show:true,                length: 10,                lineStyle: {                    color: 'green',                    type: 'solid',                    width: 2                }            },            axisLabel : {                show:true,                interval: 'auto',    // {number}                rotate: -45,                margin: 18,                formatter: '{value} ml',    // Template formatter!                textStyle: {                    color: '#1e90ff',                    fontFamily: 'verdana',                    fontSize: 10,                    fontStyle: 'normal',                    fontWeight: 'bold'                }            },            splitLine : {                show:true,                lineStyle: {                    color: '#483d8b',                    type: 'dotted',                    width: 2                }            },            splitArea : {                show: true,                areaStyle:{                    color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']                }            }        },        {            type : 'value',            splitNumber: 10,            axisLabel : {                formatter: function (value) {                    // Function formatter                    return value + ' °C'                }            },            splitLine : {                show: false            }        }    ],    series : [        {            name: '蒸发量',            type: 'bar',            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',            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: 1,            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]        },        {            name:'最高气温',            type: 'line',            xAxisIndex: 1,            yAxisIndex: 1,            data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]        }    ]};                                                                                                                                                                                        // 为echarts对象加载数据                 myChart.setOption(option);             }        );        </script>  </body></html>

require对应名称说明

折线(面积)图  line柱状(条形)图  bar散点(气泡)图  scatterK线图         candlestick饼(圆环)图    pie雷达(面积)图  radar和弦图        chord力导向布局图  fd chart地图          map仪表盘        gauges漏斗图        funnels热力图        heatmap事件河流图    eventriver韦恩图        venn矩形树图      treemap树图          tree字符云        wordcloud混搭          combinations组件          components

0 0