刚刚接触echarts，对于官网上的文档也看了些，但是对于新手最好的还是看demo，所以就在网上找了找，自己写了一个最简单的例子。1、工程所需要的文件：/build/echarts-2.1.10.zip，直接下载包，解压缩。2、建立新文件夹（放工程项目），命名随意，这里命名为web，下面再建一个echarts文件夹，放置js文件。3、本人习惯引用js包进行操作，所以没有采用官方的配置方法来操作，所以直接找到解压下来的echarts-2.1.10/build/dist目录，把文件全部拷贝到js目录下。4、web下建立index.jsp页面，进行工程编码：&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%&&%String path = request.getContextPath();String basePath = request.getScheme() + &://&+ request.getServerName() + &:& + request.getServerPort()+ path + &/&;%&&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&&html lang=&en&&&head&&meta charset=&utf-8&&&title&ECharts&/title&&/head&&body&&!--这里有三个demo--&&!-- 创建放置图标的div容器 --&&div id=&main& style=&height:500border:1px solid #padding:10&&&/div&&div id=&mainMap&style=&height:500border:1px solid #padding:10&&&/div&&div id=&mainPie&style=&height:500border:1px solid #padding:10&&&/div&&!-- 容器创建结束 --&&!-- 引入echarts关键包 --&&script src=&./echarts/echarts.js&&&/script&&script type=&text/javascript&&// 配置echarts包所在的路径，是放置所有包的路径require.config({paths : {echarts : './echarts'}});// 根据上面引用的配置路径，选择当前要用到的js包，下面的echarts即上面配置的路径，后面的即单签需啊哟用到的js包名：bar.js、line。js、。。。require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line','echarts/chart/map', 'echarts/chart/pie' ], function(ec) {//回调函数，即引用包后的操作，通过require获得echarts接口后（或者命名空间上）实例化图表，echarts接口仅有一个方法init//--- 折柱 ---var myChart = ec.init(document.getElementById('main'));//容器对象，初始化接口、图表所在节点var option1 = {//图表操作属性tooltip : {trigger : 'axis'},legend : {data : [ '蒸发量', '降水量', '最低气温', '最高气温' ]//图例说明},toolbox : {show : true,feature : {mark : {show : true},dataView : {show : false},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}},max : '500',min : '0',splitNumber : 10,axisTick : { // 轴标记show : true,length : 10,lineStyle : {color : 'green',type : 'solid',width : 2}},axisLabel : {show : true,interval : 'auto', // {number}rotate : -45,margin : 18,formatter : function(value) {return 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 formatterreturn 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 ]} ]};myChart.setOption(option1);// --- 地图 ---var myChart2 = ec.init(document.getElementById('mainMap'));myChart2.setOption({tooltip : {trigger : 'item',formatter : '{b}'},series : [ {name : '中国',type : 'map',mapType : 'china',selectedMode : 'multiple',itemStyle : {normal : {label : {show : true}},emphasis : {label : {show : true}}},data : [ {name : '广东',selected : true} ]} ]});var myChart3 = ec.init(document.getElementById('mainPie'));var option = {title : {text : '某站点用户访问来源',subtext : '纯属虚构',x : 'center'},tooltip : {trigger : 'item',formatter : &{a} &br/&{b} : {c} ({d}%)&},legend : {orient : 'vertical',x : 'left',data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]},toolbox : {show : true,feature : {mark : {show : true},dataView : {show : false,readOnly : false},restore : {show : true},saveAsImage : {show : true}}},calculable : true,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 : '搜索引擎'} ]} ]};myChart3.setOption(option);});&/script&&/body&&/html&5、代码就没有一一说明，大致就是这个样子，中间要说明一点，在ie8下，toolbox属性下的dataView兼容性有问题，所以把show设置成了false6、其他属性操作只需要参照官网上的敲基本就能满足最简单的图表需求，希望对看到这个的有点帮助。
最新教程周点击榜
微信扫一扫5分钟上手写ECharts的第一个图表
1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。
2、新建&script&标签引入模块化单文件echarts.js
3、新建&script&标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见
4、&script&标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见
5、浏览器中打开echarts.html，就可看到以下效果
1、新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。
2、新建&script&标签引入echarts-all.js，引入图表文件见
3、新建&script&标签，使用全局变量echarts初始化图表并驱动图表的生成，option见
4、浏览器中打开echarts.html，就可看到以下效果
最好的参考资源：实例
ECharts可以说是数据驱动的图表，大部分时候你关心的是那个option该如何实现，官网的提供详细的说明，另外我们还有近100个，这些例子都为你展现了最核心的option代码，可以通过在线修改查看效果，ECharts是玩出来的，希望你玩得开心。一、相关js文件的引入
这里我们采用标签式引入文件的方式，我们引入两个js文件，一个是esl.js文件和一个echarts.js。
&script src="js/esl.js" type="text/javascript"&&/script&
&script src="js/echarts.js" type="text/javascript"&&/script&
二、ECharts对象的初始化
通过文件esl.js内封装好的require获得echarts接口后可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小（如果没有指定容器的大小将会按照0大小来处理即无法看到图表）的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可多次init出多个图表。图表实例可用方法见方法，引入ECharts后的的初始化代码如下：
// 作为入口
'echarts',
'echarts/chart/pie'
//回调函数内执行图表对象的初始化
function(ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({...});
// -----------------------------
// 非入口或再次使用，图表已被加载注册
require('echarts').init(dom).setOption({...});
// 如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧
var myChart = require('echarts').init(dom);
myChart.setOption({...});
如果你不习惯于模块化你也可以这样进行初始化：
//定义一个全局的图表对象
require(['echarts'], function(ec){
//将对象保存下来
// 是的，把echarts加载后保存起来作为命名空间使用
//-----------
//接下来我们就可以进行图表的init操作了
var myChart = ECharts.init(dom);
myChart.setOption({....});
init方法说明如下：
名称参数描述
{ECharts} init
{dom} dom, {string | Object =} theme
初始化接口，返回ECharts实例，其中dom为图表所在节点，theme为可选的主题，内置主题（'macarons', 'infographic'）直接传入名称，自定义扩展主题可传入主题对象。如：
var myCharts = echarts.init(document.getElementById('main'), 'macarons')；
注意事项：
1、再实例化之前请确保相关的js文件已经引入且路径正确；
2、在执行图表对象渲染方法init(dom)的时候，记住这里的dom是一个页面容器元素的对象，请确保这个元素对象是存在的，否则执行了init(dom)方法时会报出尚未定义的错误；
3、dom元素一定要指定其大小，关于元素的大小我么可以通过css进行设置：
&div id="main" style="width:400height:300"&&/div&
也可以采用动态的javascript代码设置其大小属性值。
阅读(...) 评论()2795人阅读
webpack（2）
本例介绍如何在webpack中构建依赖echats的项目，echarts有好几种方式引入项目：
标签单文件引入：自1.3.5开始，ECharts提供标签式引入。如果项目本身并不是基于模块化开发，建议采用srcipt标签式引入，Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender。
模块化单文件引入：ECharts开发了专门的压缩合并工具echarts-optimizer，通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载。在build路径下包含了由echarts-optimizer生成的单文件：
build/dist/：经过合并、压缩的单文件
echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart/: echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
echarts-line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
echarts-bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
echarts-scatter.js : 散点图
echarts-k.js : K线图
echarts-pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
echarts-radar.js : 雷达图
echarts-map.js : 地图
echarts-force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
echarts-chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
echarts-funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
echarts-gauge.js : 仪表盘
echarts-eventRiver.js : 事件河流图
source/ : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
模块化包引入：如果项目本身是模块话的且遵循AMD规范，则只需要使用一个符合AMD规范的模块加载器，如RequireJS，配置好package路径指向src即可。由于echarts依赖底层zrendar，也需要配置好相应的package。
echarts既然支持模块化包引入，符合AMD规范，那么我们稍加配置下webpack，便可以引入到webpack构建的项目中了
webpack.config.js
module.exports = {
entry: './entry.js',
filename: 'bundle.js'
resolve: {
echarts$: "echarts/src/echarts.js",
echarts: "echarts/src",
zrender$: "zrender/src/zrender.js",
zrender: "zrender/src"
var echarts = require("echarts");
require('echarts/chart/line');
require('echarts/chart/bar');
var option = {
tooltip: {
trigger: 'axis'
data: ['蒸发量', '降水量']
toolbox: {
show: true,
feature: {
show: true
dataView: {
show: true,
readOnly: false
magicType: {
show: true,
type: ['line', 'bar']
restore: {
show: true
saveAsImage: {
show: true
calculable: true,
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
type: 'value',
splitArea: {
show: true
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]
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：40183次
排名：千里之外
原创：17篇
(3)(4)(1)(4)(3)(2)(2)