博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts图类型设置
阅读量:6717 次
发布时间:2019-06-25

本文共 1779 字,大约阅读时间需要 5 分钟。

1.title:标题组件 

2.tooltip:提示框组件 
3.legend:图例组件,展现了不同系列的标记(symbol),颜色和名字 
4.xAxis:直角坐标系 grid 中的 x 轴,单个 grid 组件最多只能放上下两个 x 轴。 
5.yAxis:直角坐标系 grid 中的 y 轴,单个 grid 组件最多只能放左右两个 y 轴。 
6.series:系列列表。每个系列通过 type 决定自己的图表类型。 
   series  type=line ——-折线图 
   series  type=bar ——-柱状图 
   series  type=pie ——-饼图 

下面生成一个柱状图 ,贴上完整代码

    
柱状图

生成的柱状图如下(粉色的小可爱)

然后改变一下类型  type:line    (蓝色的小清新)

在来生成饼图,饼图是没有xy轴的,先给注释掉,type:pie ,另外饼图的data是有包含两个键值对的json组成的数组,如下

data:[                    {value:5,name:'苹果'},                    {value:10,name:'李子'},                    {value:36,name:'栗子'},                    {value:10,name:'梨'},                    {value:18,name:'草莓'},                    {value:20,name:'菠萝'},                ]

然后我的饼图,设置了全局颜色,所以看起来比较多彩

 饼图和折线图的结合   series配置两套

series:[{                name:'销量',                type:'bar',                // data:[                //     {value:5,name:'苹果'},                //     {value:10,name:'李子'},                //     {value:36,name:'栗子'},                //     {value:10,name:'梨'},                //     {value:18,name:'草莓'},                //     {value:20,name:'菠萝'},                // ]                data:[5,10,36,10,18,20],            },                {                    name:'销量',                    type:'line',                    color:'black',                    // data:[                    //     {value:5,name:'苹果'},                    //     {value:10,name:'李子'},                    //     {value:36,name:'栗子'},                    //     {value:10,name:'梨'},                    //     {value:18,name:'草莓'},                    //     {value:20,name:'菠萝'},                    // ]                    data:[5,10,36,10,18,20],                },            ]

 

转载于:https://www.cnblogs.com/xy-milu/p/9316777.html

你可能感兴趣的文章
分布式服务Dubbo的前世今生
查看>>
[deviceone开发]-动画示例源码
查看>>
实现iOS图片等资源文件的热更新化(一): 从Images.xcassets导出合适的图片
查看>>
glom模块的使用(二)
查看>>
Centos-Mysql复制备份还原数据库
查看>>
(5)Python字典
查看>>
React 路由状态管理总结
查看>>
禅道 11.3 版本发布,主要完善细节,修复 bug
查看>>
无人机新用途,可精确识别危险海洋生物并向游泳者发出预警
查看>>
(一) virtualenv虚拟环境安装
查看>>
Android官方开发文档Training系列课程中文版:分享简单数据之从其它APP接收简单数据...
查看>>
OpenSSL将于9月22日发布多个漏洞补丁
查看>>
大数据助推新型智库建设
查看>>
新加坡欲重组通信和媒体管制机构
查看>>
《CCNP ROUTE 300-101学习指南》——2.2节构建EIGRP拓扑表
查看>>
Libreboot 项目向开源社区示好和致歉
查看>>
Linux Kernel 4.9-rc8,4.9 分支最后一个候选版
查看>>
《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.2 相关关键技术及工作原理...
查看>>
《Nmap渗透测试指南》—第1章1.5节Mac OS安
查看>>
学习和使用 PHP 应该注意的10件事
查看>>