echarts3 使用总结

由于项目需要自学了echarts，下面将学到的东西总结如下，如果有哪里写的不好，请批评指正

一、前期准备

1、使用echarts之前先要引入echarts.js，js可以到官网下载

2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。

3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急往下看），使用setoption生成图表。

（代码如下）注：后面将不再对引入js，获取id，调用option生成图表做赘述

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <!-- 引入echarts.js -->

    <script src="js/echarts.js "></script>

    <script>

    获取容器的id并赋值给变量myChart

    var myChart = echarts.init(document.getElementById('main'));

    /*用来配置参数*/

    option = {

       }

     /*调用option生成图表*/

    myChart.setOption(option)

    </script>

</body>

</html>

二、各种图表使用

1、柱状图代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script src="js/echarts.js "></script>

    <script>

    var myChart = echarts.init(document.getElementById('main'));

    myChart.title = '坐标轴刻度与标签对齐';

    option = {

        color: ['#3398DB'],

        tooltip : {

            trigger: 'axis',

            axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

            }

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis : [

            {

                type : 'category',

                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

                axisTick: {

                    alignWithLabel: true

                }

            }

        ],

        yAxis : [

            {

                type : 'value'

            }

        ],

        series : [

            {

                name:'直接访问',

                type:'bar',

                barWidth: '60%',

                data:[10, 52, 200, 334, 390, 330, 220]

            }

        ]

    };

    myChart.setOption(option)

    </script>

</body>

</html>

运行结果

2、折线图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="pic4" style="width: 600px;height:400px;"></div>

    <script src="js/echarts.js"></script>

    <script>

        var myChart13 = echarts.init(document.getElementById('pic4'));

        var data = [];

        option15 = {

                title: {

                    text: '曲线',

                },

                tooltip: {

                    trigger: 'axis',

                },

                legend: {

                    data:['昨日(11月8日)','今日(11月9日)']

                },

                grid: {

                    left: '1%',

                    right: '1%',

                    bottom: '3%',

                    containLabel: true

                },

                toolbox: {

                    show: false,

                    feature: {

                        dataZoom: {

                            yAxisIndex: 'none'

                        },

                        dataView: {readOnly: false},

                        magicType: {type: ['line', 'bar']},

                        restore: {},

                        saveAsImage: {}

                    }

                },

                color:["red","#CD3333"],

                xAxis:  {

                    type: 'category',

                    boundaryGap: false,

                    data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']

                },

                yAxis: {

                    type: 'value',

                    name: '单位（kW）',

                    axisLabel: {

                        formatter: '{value}'

                    }

                },

                series: [

                    {

                        name:'昨日(11月8日)',

                        type:'line',

                        data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],

                    },

                    {

                        type:'line',

                        name : '今日(11月9日)',

                        data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],

                    }

                        ]

            };

        myChart13.setOption(option15);

    </script>

</body>

</html>

运行结果

3、饼图

由于代码重复就不浪费地方写所有代码，直接替换（一）中的option{}就可以

option = {

    title : {

        text: '某站点用户访问来源',

        subtext: '纯属虚构',

        x:'center'

    },

    tooltip : {

        trigger: 'item',

        formatter: "{a} <br/>{b} : {c} ({d}%)"

    },

    legend: {

        orient: 'vertical',

        left: 'left',

        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

    },

    series : [

        {

            name: '访问来源',

            type: 'pie',

            radius : '55%',

            center: ['50%', '60%'],

            data:[

                {value:335, name:'直接访问'},

                {value:310, name:'邮件营销'},

                {value:234, name:'联盟广告'},

                {value:135, name:'视频广告'},

                {value:1548, name:'搜索引擎'}

            ],

            itemStyle: {

                emphasis: {

                    shadowBlur: 10,

                    shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        }

    ]

};

运行结果

4、全国地图

由于地图比较复杂，所以把全部代码展示出来

china.js可以到官网下载所有代码，在echarts/map文件夹中可以找到china.js,

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 1000px;height:800px;"></div>

    /*<script src="node_modules/echarts/theme/shine.js"></script>*/

    <script src="js/echarts.js"></script>

    <script src="node_modules/echarts/map/js/china.js"></script>

    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('main'), 'shine');

              function randomData() {

            return Math.round(Math.random()*1000);

        }

        option = {

            title: {

                text: 'iphone销量',

                subtext: '纯属虚构',

                left: 'center'

            },

            tooltip: {

                trigger: 'item'

            },

            legend: {

                orient: 'vertical',

                left: 'left',

                data:['iphone3','iphone4','iphone5']

            },

            visualMap: {

                min: 0,

                max: 2500,

                left: 'left',

                top: 'bottom',

                text: ['高','低'],           // 文本，默认为数值文本

                calculable: true

            },

            toolbox: {

                show: false,

                orient: 'vertical',

                left: 'right',

                top: 'center',

                feature: {

                    dataView: {readOnly: false},

                    restore: {},

                    saveAsImage: {}

                }

            },

            series: [

                {

                     itemStyle: {

                            normal: {

                                        color: function (params) {

                                            var colorList = [

                                              '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',

                                               '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',

                                               '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'

                                            ];

                                            return colorList[params.dataIndex]

                                        },

                                    }

                                },

                    name: 'iphone3',

                    type: 'map',

                    mapType: 'china',

                    roam: false,

                    label: {

                        normal: {

                            show: true

                        },

                        emphasis: {

                            show: true

                        }

                    },

                    data:[

                        {name: '北京',value: randomData() },

                        {name: '天津',value: randomData() },

                        {name: '上海',value: randomData() },

                        {name: '重庆',value: randomData() },

                        {name: '河北',value: randomData() },

                        {name: '河南',value: randomData() },

                        {name: '云南',value: randomData() },

                        {name: '辽宁',value: randomData() },

                        {name: '黑龙江',value: randomData() },

                        {name: '湖南',value: randomData() },

                        {name: '安徽',value: randomData() },

                        {name: '山东',value: randomData() },

                        {name: '新疆',value: randomData() },

                        {name: '江苏',value: randomData() },

                        {name: '浙江',value: randomData() },

                        {name: '江西',value: randomData() },

                        {name: '湖北',value: randomData() },

                        {name: '广西',value: randomData() },

                        {name: '甘肃',value: randomData() },

                        {name: '山西',value: randomData() },

                        {name: '内蒙古',value: randomData() },

                        {name: '陕西',value: randomData() },

                        {name: '吉林',value: randomData() },

                        {name: '福建',value: randomData() },

                        {name: '贵州',value: randomData() },

                        {name: '广东',value: randomData() },

                        {name: '青海',value: randomData() },

                        {name: '西藏',value: randomData() },

                        {name: '四川',value: randomData() },

                        {name: '宁夏',value: randomData() },

                        {name: '海南',value: randomData() },

                        {name: '台湾',value: randomData() },

                        {name: '香港',value: randomData() },

                        {name: '澳门',value: randomData() }

                    ]

                }

            ]

        };

        myChart.setOption(option);

 </script>  

</body>

</html>

运行结果

5、城市地图（以北京为例）

beijing.js可以到官网下载所有代码，在echarts/map/province文件夹中可以找到beijing.js,其他城市的使用同样方法直接引入对应的js即可

代码

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

</head>

<body>

    <div id="main" style="100%; height: 100%;"></div>

</body>

<script src="js/echarts.js"></script>

<script src="js/map/js/province/beijing.js"></script>

<script>

    var myChart = echarts.init(document.getElementById('main'));

    var option = {

        title: {

            text : '北京地图',

            subtext : '-。-'

        },

        tooltip : {

            trigger: 'item',

            formatter: function(a){

                return a[2];

            }

        },

        legend: {

            orient: 'vertical',

            x:'right',

            data:['数据名称']

        },

        dataRange: {

            min: 0,

            max: 1000,

            color:['orange','yellow'],

            text:['高','低'],           // 文本，默认为数值文本

            calculable : true

        },

        series : [

            {

                name: '数据名称',

                type: 'map',

                mapType: '北京',

                selectedMode : 'single',

                itemStyle:{

                    normal:{label:{show:true}},

                    emphasis:{label:{show:true}}

                },

                data:[

                    {name: '怀柔区',value: Math.round(Math.random()*1000)},

                    {name: '延庆县',value: Math.round(Math.random()*1000)},

                    {name: '密云县',value: Math.round(Math.random()*1000)},

                    {name: '昌平区',value: Math.round(Math.random()*1000)},

                    {name: '平谷区',value: Math.round(Math.random()*1000)},

                    {name: '顺义区',value: Math.round(Math.random()*1000)},

                    {name: '门头沟区',value: Math.round(Math.random()*1000)},

                    {name: '海淀区',value: Math.round(Math.random()*1000)},

                    {name: '朝阳区',value: Math.round(Math.random()*1000)},

                    {name: '石景山区',value: Math.round(Math.random()*1000)},

                    {name: '西城区',value: Math.round(Math.random()*1000)},

                    {name: '东城区',value: Math.round(Math.random()*1000)},

                    {name: '宣武区',value: Math.round(Math.random()*1000)},

                    {name: '丰台区',value: Math.round(Math.random()*1000)},

                    {name: '房山区',value: Math.round(Math.random()*1000)},

                    {name: '通州区',value: Math.round(Math.random()*1000)},

                    {name: '大兴区',value: Math.round(Math.random()*1000)},

                ]

            }

        ]

    };

    myChart.setOption(option);

</script>

</html>

运行结果

其他图就不做赘述，官网www.echarts.baidu.com作品中有具体例子可以根据需要直接替换option中的内容即可得到想要的结果。

四、问题补充

下面补充的内容是我在用到时候遇到的，看了官网api百度搜索了很多找到，现在做总结放到这希望自己可以帮助到一些人，也为了以后自己用好找

1、图表自适应

（1）多个echart时候

window.addEventListener("resize", function () {

myChart11.resize();

myChart12.resize()

myChart13.resize()

});

（2）单个时候

window.onresize = myChart11.resize;

2、X轴的坐标名全部显示

　　　　　　axisLabel:{
interval:0 //设置间隔，0的时候全部显示
},

3、修改柱状图同一组数据柱子颜色不一样、柱子的宽度、柱子上的提示信息

series : [

type:'bar',

itemStyle: {

　　　　　　　　　　//修改颜色

normal: {

　　color: function(params) {

　　　　　　 var colorList = ['#2eddc1','#FCCE10','#E87C25','#27727B',];

　　　　　　 return colorList[params.dataIndex]

　　//bar上显示的提示信息

　　label: {

　　　　 show: true,

　　　　position: 'top',

　　　　formatter: '{b}\n{c}'

　　}

//bar的宽度

barWidth: '30%',

data:[1,2,3,4]

}

]

4、折线图的折线平滑显示

　　　　series: [
smooth: true,

　　　　]

5、地图移动放大缩小

　　　　　　oamController: { //可移动放大缩小地图
                                        show: true,
                                        x: 'right',
                                        mapTypeControl: {
                                            'china': true
                                        }
                                    },

6、改变地图颜色和轮廓颜色

　　　　　　　　series : [
                                        {
                                            itemStyle:{
                                                normal:{
                                                   label:{show:true},
                                                   areaStyle:{color:'#c0e7fa'},//地图整体颜色
                                                   borderColor: '#fff',//地图各省轮廓颜色
                                                   borderWidth: 1,//地图各省轮廓线条粗细
                                                   },
                                                emphasis:{label:{show:true}},

                                            },　　　　　　　　　　　　]

7、为地图绑定单击事件

　　使用click事件时必须设置series : [clickable : true,]

myChart.on(ecConfig.EVENT.CLICK, function (param){
 var tooltipList='<div class="map-sql">{b}项目<img src="././img/zhuangji.png">容量：20ml<img class="map-img1" src="././img　　　　　　　　　　　　/zongfa.png">总量：40kg<img src="././img/huangguang.png">光：30kW<img src="././img/jiance.png">监测：18个<img class="map-img1" src="././img/dianshu.png">点数：941点</div> '
 if (typeof param.seriesIndex == 'undefined') {
 return;
 }
 if (param.type == 'click') {
 //获取dom对象
 var results = document.getElementsByClassName('map-lig');
 var objbj = document.getElementById('map-lightbj'); //北京
 var objsx = document.getElementById('map-lightsx'); //山西
 var objsc = document.getElementById('map-lightsc');//四川
 var objjl = document.getElementById('map-lightjl');//吉林
 var parm = param.name;
 if(parm == '北京'){
 for(var i=0;i<results.length;i++){
 if(objbj == results[i]){
 results[i].style.display = "block";
 }else{
 results[i].style.display = "none";
 }
 }
 }else if(parm == '山西'){
 for(var i=0;i<results.length;i++){
 if(objsx == results[i]){
 results[i].style.display = "block";
 }else{
 results[i].style.display = "none";
 }
 }
 }else if(parm == '四川'){
 for(var i=0;i<results.length;i++){
 if(objsc == results[i]){
 results[i].style.display = "block";
 }else{
 results[i].style.display = "none";
 }
 }
 }
 else if(parm == '吉林'){
 for(var i=0;i<results.length;i++){
 if(objjl == results[i]){
 results[i].style.display = "block";
 }else{
 results[i].style.display = "none";
 }
 }
 }
 else{
 for(var i=0;i<results.length;i++){
 results[i].style.display = "none";
 }
 }
 }
 });
 });

附加新内容见echarts3使用总结2http://www.cnblogs.com/hhw3/p/7365117.html

上述内容是参照echarts官网http://echarts.baidu.com/,若有侵权请联系，谢谢！

作者：BlancheWang
出处：http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

echarts3 使用总结的更多相关文章

Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
flask+sqlite3+echarts3 系统监控
总的而言,分三部分: 1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率,存入数据库. 2.路由器(app.py): 响应页面的ajax,获取最新的一条或多条数据. 3.页面(in ...
flask+sqlite3+echarts3+ajax 异步更新数据
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
关于echarts3地图下钻省市
最近关于echarts3弄了个地图下钻,也许是因为运气不好,开始上来需要传递到的城市是成都,结果成都地图(js)加载下来总是挤到了一起,好尴尬,各方实验查找后发现原来是js文件中,成都市地图有个县市并 ...
asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送
先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...
Echarts3
今天用想在后台首页做个图表,看到highcharts没用喜欢的样式想起了Echarts,百度了下,发现不一样了呢,原来出了Echarts3 感觉这个比Echarts2好用多了下载了个精简版,ech ...
echarts3 中热力图的属性大全
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
在echarts3中使用字符云
echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载: 下载地址:https://github.com/ecomfe/echar ...
【echarts3】--1 简单入门
echarts3 相信大家都了解吧,是百度研发的 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8 ...

随机推荐

3D场景鼠标点选择物体
对于以下几种选择: (1)点云: (2)线框: (3)网格: 针对以上准备三个函数: (1)获取点和线段最短距离函数: (2)获取线段和线段最短距离函数: (3)获取三角面片和线段最短距离函数: 算法 ...
C语言分割字符串
对指针的操作有点迷糊只好采用下面一些比较low的手段 char str[100]; char delims[] = ";"; char *result = NULL; sprin ...
Python: 字典应用题
Write a program to read through the mbox-short.txt and figure out who has sent the greatest number o ...
[UVA-11039]Children's Game
解析微扰法贪心经典题代码 #include <bits/stdc++.h> using namespace std; bool cmp(const string &x, con ...
Select2 添加默认值
折腾很久才解决问题 $.ajax({ url: '@Url.Action("GetSystemSzzdItem", "CangpinGushi")', type ...
[osg][原]osg的坐标系：使用右手法则Y轴向前、X向、右Z向上。camare的默认姿态：向下看（Z轴负向），头向前（Y轴正向）
参考:http://blog.csdn.net/tmljs1988/article/details/7561887 图中上半边为opengl坐标系,下半边的osg坐标系: osg::Camare的默认 ...
Dragger2好网文整合
Dagger2从入门到放弃再到恍然大悟详解Dagger2 http://blog.csdn.net/u012124438/article/details/52505986
nodejs + ts 配置
参考:https://github.com/nestjs/typescript-starter 和 How to get auto restart and breakpoint support wit ...
linux基础01-bash特性
(1) ls -l:长格式文件类型: -:普通文件 (f) d: 目录文件 b: 块设备文件 (block) c: 字符设备文件 (character) l: 符号链接文件(symbolic link ...
Python 编程快速上手第八章总结
在下面函数中的()中,可为相对路径,也可为绝对路径. 获知当前目录,改变当前目录,查看当前目录更改当前目录:os.getcwd() 改变当前目录:os.chdir() 查看当前目录:os.listd ...

echarts3 使用总结

echarts3 使用总结的更多相关文章

随机推荐

热门专题