Echarts炫酷配置

柱状图

grid: {top: "15%",left: "3%",right: "4%",bottom: "3%",containLabel: true,  //刻度显示},color: "#00edff",  //直接设置柱状图的柱状颜色，多个的话可以写成数组dataZoom: [{type: "slider", //提供一个滑块可以左右滑动来进行数据筛选，说白了就是把想看到的数据放大，还有一个属性值`inside`这个是可以直接通过鼠标滚轮进行筛选，内置，下面不会出现滑块yAxisIndex: 0,    //第一条y轴show: true,    //柱状数据显示height: "85%",width:'6%',bottom: '5%',left: "5%",textStyle: {   //柱状数据文字color: "white",fontSize:20},// borderColor: "transparent",  //滚动条边框backgroundColor: "#11c19c", //滚动长条颜色// 拖拽手柄样式 svg 路径handleColor: "red", //滚动颜色handleSize: 30,   //手柄大小也就是滚动的小圆点start: 100,   //终止百分比end: this.index, //这个是我封装的终止跟返回值},],

饼图

  tooltip: {trigger: "item",formatter: " {b}:<br/>{c} ({d}%)",},title: [{subtext: "年度综合能耗占比",   //副标题left: "76%",top: "8%",textAlign: "center",  //副标题位置subtextStyle: {   //副标题文字效果color: "white",fontSize:18},},   legend: {    //过滤标题也就是分类的小模块left: "center",top: "14%",data: this.data;  //vue获取的数据itemWidth: 30,   //小模块大小itemHeight: 15,    },toolbox: {   //内置对象 有导出图片，数据视图，动态类型切换，数据区域缩放，重置的美好show: true,//是否显示工具栏组件feature: {//除了各个内置的工具按钮外，还可以自定义工具按钮。mark: { show: true },magicType: {show: true,type: ["pie", "funnel"], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）},},},series: [{type: "pie",radius: "50%",center: ["25%", "60%"],roseType: "radius",//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
//'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
//'area' 所有扇区圆心角相同，仅通过半径展现数据大小。label: {show: true,  //显示数据},data: this.data,startAngle: 150, //坐标系起始角度，也就是第一个指示器轴的角度。可以旋转itemStyle: {normal: {label: {show: true,position: "outer",  //内容显示在外面fontSize: 12,fontWeight: "bold",align: "left",formatter: "{b}:({d}%)",},labelLine: {//指示线状态show: true,smooth: 0.4,length: 15,length2: 15,smooth: true,},},},},],//     roseType: "radius", //南丁格尔图 半径取决于数据大小这个跟上面的radius不能同用//     selectedMode: "single", //设置选中的效果，能够将选中的区域偏离原点一小段距离,`multiple`可以实现多选偏离因为前面那个属性值离开的时候他会自动还原//     selectedOffset: 20, //设置偏离的距离}

折线图

这里主要讲基准线

  series: [//省略部分代码{// areaStyle: {},// smooth: true,name: "计划",type: "line",markLine: {// symbol: "none",  //基线两头是否有起始标记label: {position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束formatter: this.data+"(kw/h)",// color: "red",fontSize: 18,},lineStyle: {normal: {color: "#fcff00",type: "dashed",},// animationThreshold:2},data: [{ yAxis: this.data, name: "min" }],  //基准线数值},

Echarts炫酷配置相关推荐

echarts 炫酷北京地图
代码如下 <script type="text/javascript" src="js/jquery.js"></script> < ...
echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！
数据大屏与数据可视化数据可视化是目前对数据展示最常用的方式.数据的可视化设计有助于将复杂的数据,用最易理解的方式展示在用户的面前. 数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性 ...
超级超级炫酷的Echarts数据可视化
刚做完的一个Echarts数据可视化项目就问你看起来流不流弊炫不炫酷哈哈哈哈虽然看起来很流弊但是只要学了Echart都可以做出来 01-Echarts-介绍 ECharts,一个使用 Java ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
Echarts案例：整一个炫酷一点的仪表盘
故事发生在几天前公司要求做个仪表盘,大致UI是这样的这不是为难我胖虎嘛,于是找遍整个全网也没找到相似的,只能自己手写一个. 然而,最开始是准备用极坐标写的折腾了一上午发现极坐标做出的效果两头是3 ...
手机1像素线粗_小米1亿像素手机配置全曝光：史上最炫酷呼吸灯！
小米官方已经定于11月5日发布首款1亿像素拍照手机--小米CC9 Pro. 据悉,小米CC9 Pro采用了一亿像素五摄四闪全焦段的配置,支持双光学防抖.10倍混合光学变焦.50倍数字变焦,拍照对标友商 ...
elementui的tree组件页面显示不出数据_只要10分钟，教你配置出炫酷的数据可视化大屏...
在电影<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻.现在这种立体化大屏幕似乎成了好莱坞大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏.随着社会信息化的高速增长,数据可视 ...
SpringBoot集成logback彩色日志配置以及banner启动设置（炫酷到爆炸！）
文章目录前言一.banner配置 1.1 banner图像在线生成工具 1.2 banner配置颜色 1.3 banner启动状态控制二.logback彩色日志配置 2.1 引入依赖 2.2 l ...
IDEA优化配置（6）--- 炫酷的主题字体颜色设置（基于Intellij IDEA 2018）
Intellij IDEA 2018/2019 优化配置.使用技巧.参数设置.快捷键汇总帖 IDEA 炫酷的主题字体颜色设置(基于IDEA 2018) 前言: IDEA中主题可以更换,大家可以直接到 ...
IDEA主题配置--- 炫酷的主题字体颜色设置（基于Intellij IDEA 2018）
Intellij IDEA 2018/2019 优化配置.使用技巧.参数设置.快捷键汇总帖 IDEA 炫酷的主题字体颜色设置(基于IDEA 2018) 前言: IDEA中主题可以更换,大家可以直接到 ...

Echarts炫酷配置

Echarts炫酷配置

柱状图

饼图

折线图

Echarts炫酷配置相关推荐

最新文章

热门文章