我们打开echarts，新创建一个div项目，我们就在div项目下的index.html中来引用echarts放进去了。
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
第一步，新建静态页面bar.html，修改title并引入echarts js文件，如下图所示：第二步，添加条状图容器，在<body></body>插入一个div，并给出id属性和宽度高度，如下图所示：
第三步，编写生成条状图的js代码，添加数据和样式，如下图所示：
第四步，预览该图形界面，可以看到效果图，如下图所示：
第五步，编写点击条状图的柱子，然后获取它们的name和value，如下图所示：
第六步，再次预览该界面，打开浏览器的控制台，查看打印结果，如下图所示：
先说明本人用的是echarts3版本在jsp上来里面需要引入：
<script
src="plugins/echarts/echarts.min.js"></script>
<script
type="text/javascript"
src="js/showChart.js"></scrip
<script
src="plugins/htmb/vendor/jquery/jquery.min.js"></script>
以上就是下面我们所要展示的效果
接下来言归正传，直插主题
打开eclipse
创建一个js,名字可以随便起，我这里就为showCharts.js
直接上代码
var
chartOutChar
=
null
var
option1
=
{
tooltip
:
{
trigger:
'item',
formatter:
"{a}
<br/>{b}
:
{c}
({d}%)"
},
legend:
{
x
:
'center',
y
:
'bottom',
data:['新闻','论坛','微信','微博','博客','贴吧','问答','财经网站','传统纸媒']
},
toolbox:
{
show
:
true,
feature
:
{
mark
:
{show:
true},
dataView
:
{show:
true,
readOnly:
false},
magicType
:
{
show:
true,
type:
['pie',
'funnel']
},
restore
:
{show:
true},
saveAsImage
:
{show:
true}
}
},
calculable
:
true,
series
:
[
{
name:'面积模式',
type:'pie',
radius
:
[30,
110],
center
:
['50%',
'50%'],
roseType
:
'area',
data:[
{value:10,
name:'新闻'},
{value:40,
name:'论坛'},
{value:15,
name:'微信'},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）