![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts
开水没有冬天
如果可以,我会珍惜
展开
-
echarts-markline
markLine: { data: [ // 可以是平均值 {type: 'average', name: '平均值'}, // 也可以是某个值 // { // name: 'Y 轴值为 100 的水平线', // yAxis: 5 // }, ], lineStyle: { // color: 'rgba(255,88,0,0.7)', // 线的样式,emphasis调整hover后的样式 color: 'r原创 2021-01-22 22:13:01 · 1500 阅读 · 0 评论 -
echarts-tooltip
tooltip: { trigger: 'axis', backgroundColor: 'rgba(255,255,255,0.8)', // 框的背景颜色 padding: [ 10, // 上 17, // 右 10, // 下 10, // 左 ], borderColor: 'rgba(0, 0, 0, 0.1)', // 边框颜色 borderWidth: 1, // 边框宽 // 具体的弹框内容 formatter: func原创 2021-01-22 22:10:32 · 130 阅读 · 0 评论 -
echarts-formatter
series-pie.label. formatter:标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。字符串模板字符串模板 模板变量有:{a}:系列名。{b}:数据名。{c}:数据值。{d}:百分比示例:formatter: '{b}: {d}'回调函数回调函数格式:// 参数 params 是 formatter 需要的单个数据集。(params: Object|Array) => string示例:f原创 2020-10-10 14:59:08 · 641 阅读 · 0 评论 -
echarts-grid
grid: { // 间距是 根据x、y轴计算的;假如都是0,x、y轴的label汉字就隐藏掉了。 left: 24, // 默认10%,给24就挺合适的。 top: 24, // 默认60 right: 24, // 默认10% bottom: 24, // 默认60 width:'100%', // grid 组件的宽度。默认自适应。 height:'100...原创 2019-09-17 17:32:06 · 13609 阅读 · 1 评论 -
echart-bar
xAxis: { type: 'category', data: ['MySql','Redis',], // show:false, axisTick: { // x轴隐藏刻度 show: false, }, axisLine: { // x轴的颜色 lineStyle: { color: '#DADFEA', } }, axi...原创 2019-09-17 14:09:54 · 1386 阅读 · 0 评论 -
echarts-pie
中间的有效率 :可以使用title属性,放在中间可以使用定位position定位到圆的中间参数:title: { text: '我是标题', top: '36%', left: '46%', subtext: '有效率', textAlign: 'center', // 对齐方式 textStyle: { // 主标题样式 color: '#82929F...原创 2019-09-17 14:02:40 · 652 阅读 · 0 评论 -
echarts的部分参数设置
饼状图:取消hover的状态x和y轴:yAxis: { type: 'category', data: ['实例','流程'], axisTick:{ // 是否显示刻度 show:false, }, axisLine:{ // 轴线的设置,eg:轴的颜色 lineStyle:{ color:'#D9D9D9', } }, ax...原创 2019-09-09 20:16:03 · 1563 阅读 · 0 评论 -
echarts-legend
legend:图例组件。formatter// 初始:return name;// 可以修改格式:eg:formatter:function(name){ var tem=''; if(name=='最高气温'){ tem='\n \n'+name +'\n \n'+'总计次数:100000 '; }else if(name=='访问流量'){ tem='...原创 2019-08-27 20:05:25 · 334 阅读 · 0 评论 -
使用echarts
<div id="{{elementId}}" style="height:400px;width: 100%;"></div>import * as echarts from 'echarts'; constructor(private devicemgmtService: DeviceMgmtService, // 因为重写了service文件,需要重新编译的...原创 2019-07-02 19:30:16 · 151 阅读 · 0 评论 -
echarts-水球图
cpu使用率,磁盘剩余空间等图形。参考:https://gallery.echartsjs.com/editor.html?c=xSgRUrdtr_https://github.com/ecomfe/echarts-liquidfillvar value = 0.62; // 图形的值var data = []; // 波浪个数data.push(value)data.push(va...原创 2019-07-02 15:38:32 · 3294 阅读 · 0 评论 -
echarts的事件
this.charts.dispose() // 销毁实例,销毁后实例无法再被使用。 this.charts.clear() // 清空当前实例,会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。 this.charts.resize() // 改变图表尺寸,在容器大小发生改变时需要手动调用。 this.charts.setOpt...原创 2019-06-04 16:52:24 · 1479 阅读 · 0 评论 -
ngx-echarts
百度:npm搜索:ngx-echarts,第一个结果就是。地址:https://www.npmjs.com/package/ngx-echarts查看installation和usage:在模块中引入NgxEchartsModule模块!然后就可以使用了!options就是echarts的配置参数;merge:在动态添加点的时候,有用;...原创 2019-04-18 11:28:41 · 2685 阅读 · 0 评论 -
echarts-title
版本:version: “4.2.0”原创 2018-12-29 14:40:27 · 417 阅读 · 0 评论