echarts3 使用总结(绘制各种图表,地图)

前端之家收集整理的这篇文章主要介绍了echarts3 使用总结(绘制各种图表,地图)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、前期准备

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

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

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

代码如下)注:后面将不再对引入js,获取id,调用option生成图表做赘述

<@R_404_338@ charset="UTF-8"> Document

二、各种图表使用

1、柱状图代码

<@R_404_338@ charset="UTF-8"> Document

运行结果

2、折线图

<@R_404_338@ charset="UTF-8"> Document

运行结果

3、饼图

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

站点用户访问来源',subtext: '纯属虚构',x:'center' },tooltip : { trigger: 'item',formatter: "{a}
{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.5)' } } } ] };

运行结果

4、全国地图

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

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

<@R_404_338@ charset="UTF-8"> Document
/*

运行结果

5、城市地图(以北京为例)

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

代码

<@R_404_338@ charset="utf-8"> <@R_404_338@ http-equiv="X-UA-Compatible" content="IE=edge">

运行结果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/42830.html

猜你在找的JavaScript相关文章