echarts的用法

一.字符云的使用
1.需要引入2.0的echarts，3.0的显示不出来
2.引入echarts-wordcloud.min.js
下载地址：https://github.com/ecomfe/echarts-wordcloud
dist文件夹下的echarts-wordcloud.min.js
3、页面上创建容器：

<div id="zifuyun" style="width:98%;height:300px;margin: 0 auto;"></div>

4.用法实例

function getZifuyun() {
    var data = {
        value: [{
            "name": "纺织业",
            "value": 60
        },
            {
                "name": "生物与新医药",
                "value": 928
            },
            {
                "name": "计算机通信",
                "value": 450
            },
            {
                "name": "电子信息",
                "value": 530
            },
            {
                "name": "节能技术",
                "value": 514
            },
            {
                "name": "新材料技术",
                "value": 486
            },
            {
                "name": "制造业",
                "value": 530
            },
            {
                "name": "高新技术服务",
                "value": 163
            }
        ],
        //小鸟图片
        image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAAH0CAYAAAC0B817AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjkzQzAwRUY1NUIyMTFFOUE3ODI4N0E4M0IzMDYyODYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjkzQzAwRUU1NUIyMTFFOUE3ODI4N0E4M0IzMDYyODYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4NEQ1RUE4NTRGMzExRTlBN0I1REZCRTdGRThBMkYxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk4NEQ1RUE5NTRGMzExRTlBN0I1REZCRTdGRThBMkYxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YhtPVQAACuVJREFUeNrs3cFuHDUcwGHbsylqCxfehFuReJwKiRfg3DMvgIT6KEhckOg7cOfYC20lmh0b2+PZnSSbpL3tVt9XTWe7TUD69/CTZ7yTGP8of4c5PA+PKH+G3wIAfKHiD+HHR79oCu93LZrp/dtHw/nszesXx4qWMs71t7x5DQDnWsY4XqR4eB0Pb4YP3718tIX5+bf1W34v/7RwPvv19V8Pf3UNZJlLbKFsjayvQ3+1BlM4ATjrch7Psf2a2u+1Xml5nVJ86Ls//PTy+xrOuuJ8SFtZtlj2SNZg5nH0eJYllu190QTgUuIZU1zOsa8+YwtmO0qKpce0HfHeiO4eimbM1znk/YjmnOs59HMLZR7BLFk1Abigdo5wpnEuUwo51T9PtaJzjegulnSV7ovn6XDWKMZSoznPSzhbQNcVZ199zsuKs9/rXCMKAGcuHVabMeR2rqvLPJX+fk71XINZ2lq0Zi7W1ycu3+5OrjR7NPctmvW4Lj2gLZbH1WdZL9HGNZ4AcO5qLEtfSY5Ltqldlm2XaXfLJdplE08/x6kl8cmdlefuTjTzYaVZz9fHFWe/v7kf9zzXeG4v1dpWC8A5WwIY49hVW6NZyrwEs+YvpPo6XPVmjq+vv67D7cu2t8I5VpVLLMsxmvX9GtG+SWgeq86wiadwAnAh4VyjWRsWe0SnXQ1ou25bA1njVo8ayrb0jKWfY6rH7nQ4j7tn11XnJppt9bne3zzEs/0v5vE5Tvc5ATjnbo77lUs0SxjRDHO7eFvXhstXjXi2L73u90RbG8smlzG8Kq++efPLi74hKP83h/3HOcwfl8u0/fi4RHNcpl0u4W7DuRdMAC5HGqvHNZxpl5bPcdaV51RXndOTelyNo77ePZlK+mpqEf33xc9vjgntUWy7ZnM43M+sRzzsol1WnoeNQetGofUKbZkFFIAzXnFOSzBbu/rGoJrAed/uNOZQs9j2BMWS6p/2bV9t2x1UQhpNjK1xy4p1d1x6rg84GDtoS95clh0rzTwCmsfRNgplD0AA4BK0+LXnHPQnBY3V57Tc1Ywxt11DYY7LPc0yrb2r7+cYp3zYyLOEsz8hqL1YH2qwhLHvnm1Hi+e8+ShK+7u2+ly/tv83/JMAcM4rznHKU+9dWe5nLgvJtvJsm4Gm1NtXWuvSPBaG66Nml3bevFRbxsMM1o+Z9I0/I57r5dk1mu2S7p2dtQBwzvGMI5ftIUHX+RjPXbjxiZF2mXZtYio3bkeuK85wfGD75olA/Zs29y7Xy7drgZf7nceflgIA517O3J7rPl73RWM8rkd7NHc3WxhGI0fqxopz89zZ7ROB1s0/eX1qUH1/feyeaAJwaXqz8iGesT9JqP3gr/34vGZ7ilB77Oy4h7np4vpjNG89cm808MENP5sHBa3RzHbUAnABUn9KUAljmflg61oLp7tfc7xUe/KblzoePrP54EYg7QTgnMW72Ypr26Y4Vpbl9JPwjm8ngwSAz1i0GgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAIBwAoBwAoBwAoBwAoBwAoBwGgEACCcACCcACCcACCcACCcACKcRAMCn29VjqsfViOj2yPWI49yOsjlvj7A5A8A5i5vz9kibcxp9TKORN472F0/r8XU95s2xH5Gcb4Vzviec2b8FABcg3RPO6VY4p01At+F8urtV4PsUq0oAvmCf0rjeyhbOd/V4e2vFOd+z4nSpFoBL9qmXaqdw+lLtO5uDAOAz/C/AAGlcgLXrgBzCAAAAAElFTkSuQmCC'
    }
    var myChart = echarts.init(document.getElementById('zifuyun'));
    //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以，转为base64的图片
   
    var maskImage = new Image();
    maskImage.src = data.image

    maskImage.onload = function () {
        myChart.setOption({
            backgroundColor: 'transparent',
            tooltip: {
                show: false
            },
            series: [{
                type: 'wordCloud',
                gridSize: 1,
                sizeRange: [12, 55],
                rotationRange: [-45, 0, 45, 90],
                maskImage: maskImage,
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' +
                                Math.round(Math.random() * 166) +
                                ', ' + Math.round(Math.random() * 166) +
                                ', ' + Math.round(Math.random() * 166) + ')'
                        }
                    }
                },
                left: 'center',
                top: 'center',
                right: null,
                bottom: null,
                data: data.value
            }]
        })
    }


}
4、结果展示：

二、3d立体圆柱图的做法
1、需引入echarts-gl

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>

2、页面上创建一个容器

 <div style="width:1000px;height:600px;margin: 0 auto;" id="enterprise-count"></div>

3、做法实例：

function getEeterpriseCount() {
    var myChart = echarts.init(document.getElementById("enterprise-count"));
    var timeDatas = ['201801', '201802', '201803', '201804', '201805', '201806'];
    var streets = ['北桥街道', '漕湖街道', '澄阳街道', '高新区', '度假区', '元和街道', '阳澄湖街道', '黄桥街道'];
    var data = [[0, 0, 100], [0, 1, 130], [0, 2, 234], [0, 3, 176], [0, 4, 189], [0, 5, 547], [0, 6, 550], [0, 7, 600], [0, 8, 787], [1, 0, 78], [1, 1, 456], [1, 2, 333], [1, 3, 345], [1, 4, 350], [1, 5, 389], [1, 6, 400], [1, 7, 456], [1, 8, 567], [2, 0, 456], [2, 1, 345], [2, 2, 564], [2, 3, 456], [2, 4, 678], [2, 5, 577], [2, 6, 678], [2, 7, 789], [2, 8, 890], [3, 0, 700], [3, 1, 300], [3, 2, 400], [3, 3, 789], [3, 4, 367], [3, 5, 786], [3, 6, 567], [3, 7, 457], [3, 8, 456], [4, 0, 245], [4, 1, 566], [4, 2, 346], [4, 3, 897], [4, 4, 678], [4, 5, 456], [4, 6, 245], [4, 7, 345], [4, 8, 567], [5, 0, 456], [5, 1, 167], [5, 2, 876], [5, 3, 567], [5, 4, 345], [5, 5, 678], [5, 6, 345], [5, 7, 600], [5, 8, 450]]

    var option = {
        tooltip: {},
        visualMap: {
            max: 1000,
            inRange: {
                color: ['#f9e483', '#fdae61', '#669fd6', '#87ccef', '#7fbee5', '#ffbf6a', '#eeffff', '#bf1927']
            }
        },
        xAxis3D: {

            type: 'category',
            name: '',
            data: timeDatas,
            axisLabel: {
                fontFamily: 'MicrosoftYaHei',
                margin: 15,
                fontSize: 12,
                fontWeight: 'normal',
            },
            axisLine: {
                lineStyle: {
                    type: "solid",//坐标轴线线的类型。
                    color: "#70a4c3",//坐标轴线线的颜色
                    width: 1,//坐标轴线线宽。
                    fontSize: 12
                },
            },
        },
        yAxis3D: {
            type: 'category',
            name: '',
            data: streets,
            axisLabel: {
                fontFamily: 'MicrosoftYaHei',
                margin: 15,
                fontSize: 10,
                fontWeight: 'normal',
            },
            axisLine: {
                lineStyle: {
                    type: "solid",//坐标轴线线的类型。
                    color: "#70a4c3",//坐标轴线线的颜色
                    width: 1,//坐标轴线线宽。
                    fontSize: 20
                },
            },

        },
        zAxis3D: {
            type: 'value',
            name: '',
            axisLabel: {
                fontFamily: 'MicrosoftYaHei',
                margin: 11,
                fontWeight: 'normal',
            },
            axisLine: {
                lineStyle: {
                    type: "solid",//坐标轴线线的类型。
                    color: "#70a4c3",//坐标轴线线的颜色
                    width: 1,//坐标轴线线宽。
                    fontSize: 20
                },
            },
        },
        grid3D: {
            boxWidth: 200,
            boxDepth: 80,
            viewControl: {
                // projection: 'orthographic'
            },
            light: {
                main: {
                    intensity: 1.2,
                    shadow: true
                },
                ambient: {
                    intensity: 0.3
                }
            }
        },
        series: [{
            type: 'bar3D',
            data: data.map(function (item) {
                return {
                    value: [item[0], item[1], item[2]],
                }
            }),
            shading: 'lambert',

            label: {
                textStyle: {
                    fontSize: 16,
                    borderWidth: 1
                }
            },

            emphasis: {
                label: {
                    textStyle: {
                        fontSize: 20,
                        color: '#900'
                    }
                },
                itemStyle: {
                    color: '#900'
                }
            }
        }]
    }
    myChart.setOption(option);

}

三、报警告there is a chart instance already initialized on the dom 怎么解决
解决方法：销毁实例
echarts.dispose(document.getElementById(“area-chanzhi-anaysis”))
如果数据有变化则需要

  myChart.clear();
  myCharts.setOptions(option);