《数据可视化——ECharts项目.docx》由会员分享，可在线阅读，更多相关《数据可视化——ECharts项目.docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、数据可视化ECharts项目此工程是根据pink教师的课程实现的ECharts数据可视化工程工程地址Echarts根底知识ECharts一个使用JavaScript实现的开源可视化库可以流畅的运行在PC以及挪动设备上兼容当前绝大局部阅读器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库ZRender提供直观交互丰富可高度个性化定制的数据可视化图表。官网地址1.使用步骤获取ECharts该工程使用直接下载的ECharts插件引入ECharts插件到html页面中scriptsrc./js/echarts.min.js/script准备一个具备大小的DOM容器bod
2、y!-为ECharts准备一个具备大小宽高的DOM-dividmainstylewidth:600px;height:400px;/div/body初始化echarts实例对象/基于准备好的dom初始化echarts实例varmyChartecharts.init(document.getElementById(main指定配置项以及数据(option)varoptiontitle:text:ECharts入门例如tooltip:,legend:data:销量xAxis:data:衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子yAxis:,series:name:销量,type:bar,data:5
3、,20,36,10,10,20将配置项设置给echarts实例对象myChart.setOption(option);2.Echarts根底配置series系列每个系列通过series.type决定自己的图表类型图表数据指定什么类型的图表可以多个图表重叠。xAxis直角坐标系grid中的x轴yAxis直角坐标系grid中的y轴grid直角坐标系内绘图网格title标题组件tooltip提示框组件legend图例组件color调色盘颜色列表boundaryGap:坐标轴两边留白策略类目轴中boundaryGap可以配置为true以及false。默认为true可以保证刻度线以及标签对齐。这时候刻度
4、只是作为分隔线标签以及数据点都会在两个刻度之间的带(band)中间。数据堆叠同个类目轴上系列配置一样的stack值后后一个系列的值会在前一个系列的值上相加。例如letoption/color设置线条的颜色注意后面是个数组color:pink,red,green,skyblue,/设置图表的标题title:text:折线图堆叠123/图表的提示框组件tooltip:/触发方式trigger:axis,/坐标轴指示器坐标轴触发有效axisPointer:type:shadow/默认为直线可选为line|shadow/图例组件legend:/series里面有了name值那么legend里面的dat
5、a可以删掉/网格配置grid可以控制线形图柱状图图表大小grid:top:10%,left:22%,bottom:10%/是否显示刻度标签假如是true就显示false那么不显示containLabel:true/工具箱组件可以另存为图片等功能toolbox:feature:saveAsImage:/设置x轴的相关配置xAxis:show:false/设置y轴的相关配置yAxis:type:category,inverse:true,data:HTML5,CSS3,javascript,VUE,NODE,/不显示y轴线条axisLine:show:false/假如想要设置单独的线条款式/lin
6、eStyle:/color:rgba(255,255,255,.1),/width:1,/type:solid/不显示刻度axisTick:show:falseY轴的文字颜色以及大小axisLabel:color:#ffffontSize:12/y轴分隔线款式splitLine:lineStyle:color:rgba(255,255,255,.1)type:category,inverse:true,data:702,350,610,793,664,/不显示y轴线条axisLine:show:false/不显示刻度axisTick:show:falseaxisLabel:color:#fff
7、,fontSize:12/系列图表配置它决定着显示那种类型的图表series:name:bar,type:bar,/柱子之间的间隔barCategoryGap:50,/修改柱子宽度barWidth:10,itemStyle:/修改柱子圆角barBorderRadius:20,/给itemStyle里面的color属性设置一个返回值函数/params传进来的是柱子对象color:function(params)/dataIndex是当前柱子的索引号returnmyColorparams.dataIndex;data:70,34,60,78,69,/图形上的文本标签label:normal:sho
8、w:true,/图形内显示position:inside,/文字的显示格式c会自动的解析为数据data里面的数据formatter:c%yAxisIndex:0,/层级关系name:box,type:bar,barCategoryGap:50,barWidth:15,itemStyle:color:none,borderColor:#00c1de,borderWidth:3,barBorderRadius:15data:100,100,100,100,100,yAxisIndex:1,/层级关系补充知识点1.折线类型图表把折线修饰为圆滑在series数据中添加smooth为true2.带有直角
9、坐标系的比方折线图、柱状图是grid修改图形大小而饼形图是通过radius修改大小3.饼图图形上的文本标签可以控制饼形图的文字的一些款式label对象中设置/文本标签控制饼形图文字的相关款式注意它是一个对象label:fontSize:104.引导线调整在series对象里面的labelLine对象设置/引导线调整labelLine:/连接扇形图线长length:6,/连接文字线长length2:85.地图放大通过zoom设置为数字工程使用的技术divcssflex布局Less在html页面中需导入对应的css文件在VScode中安装EasyLESS插件可以直接把less文件转成css文件原生jsrem适配引用淘宝的flexible.js把屏幕分为24等份VScode中安装cssrem插件并修改cssrem插件的基准值为80px但是别忘记重启vscode软件保证生效