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.imagemaskImage.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);

echarts的用法相关推荐

【echarts高级用法】在地理坐标系中镶嵌柱状图，在加上时间轴让图动起来
为了冲个官方认证新星博主,发点库存在地理坐标系中镶嵌柱状图,在加上时间轴让图动起来将现成的内容加以组合,一直是白嫖的最高级形式.对此,PPAP大叔直呼内行. echarts,作为一款基于JavaS ...
echarts基本用法
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术完成该项目需要 ...
echarts formatter用法
ECharts 中 formatter 是一个格式化函数,用于格式化提示框(tooltip)和图例(legend)中的文本显示.其函数接收一些参数,返回格式化后的字符串,以在图表中显示. 使用方法: ...
php echarts官网,Echarts用法详细介绍
这篇文章主要介绍了Echarts基本用法,详解的介绍了Echarts的基本用法和实例,有兴趣的可以了解一下 echarts太完美了: 1,开源软件,无私的为我们提供漂亮的图形界面: 2,使用简单,默默 ...
echarts图表入门级教程（An introductory chart tutorial）
2022.10.12本人第一次使用echarts,接下来就让我和大家一起介绍echarts的用法. I am using echarts for the first time, so let me i ...
echarts做中国地图分布
1.echart@5以上版本好像去处理map地图,想要用echarts制作地图得拿到china.json(中国各省份经纬度),我会放到文章最下面 2.china.json引入 import data ...
Echarts图形化报表工具
一.什么是Echarts? ECharts 是一个由百度团队开发的开源项目,它是一个纯JavaScript的商业级数据图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,可以 ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
第一本 ECharts 数据可视化书籍出版了！
L说:这是朋友王大伟的著作,推荐大家购买. 我的第一本书终于出版了,书名叫做<ECharts数据可视化:入门.实战与进阶>,目前在当当.京东已经上架,可购买学习! 什么是ECharts E ...

echarts的用法

echarts的用法相关推荐

最新文章

热门文章