范天缘的博客

x轴线

显示不同y轴

echarts动画效果

在series属性里面的对象里面加上smooth: true属性即可series:[ { name:'测试', smooth: true, //加这个 data:[1,2,3,4] }]

在series属性里面的对象里面加上symbol:'none‘属性即可series:[ { name:'测试', symbol:'none', //加这个 data:[1,2,3,4] }]

在series属性里面加入itemStyle的normal里面加入barBorderRadius属性series: [ { name: '男', type: 'bar', data: [10,20,70,40], itemStyle:{ normal:{

找到xAxis配置项,加入splitLine字符串里面加入show字段xAxis: { type: 'value', splitLine:{ show:false, },}

找到legend配置项,加入textStyle字符串里面加入colorlegend:{ textStyle:{ color:'rgb(255,255,255,0.9)' }}

找到series定义图片的位置 加上itemStyle里面的代码series: [ { name: '2011', type: 'bar', itemStyle:{ normal:{ color:new $echarts.graphic.LinearGradient(

这里的折线图例缺失了一块的问题折线图例缺失了一块 很不美观 也没有百度到这个原因,自己排查了一下 原因：是因为当前折线使用了虚线显示，把虚线变成实线就显示正常了lineStyle:{ width:2, type:'solid' //'dotted'虚线 'solid'实线 } ...

需求:当前有4条折线,默认只显示两条折线看了一下echarts的文档,legend属性的selected可以控制legend: { orient: "vertical", show: _this.legendShow, top: 120, right: -10, textStyle: { color: "rgba(255, 255, 255, 0.7)", }, data: ["订单量", "交货量", "发货量(过账)", "缺货量"], selected:

找到series,在定义图形的type下面加上这4个属性 series: [{ type: 'pie', //这句不要复制,复制下面4句 animationType: 'scale', animationEasing: 'elasticOut', animationDuration: 2000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果//初始动画的

series加上label字符串label: { normal: { show:true, position: 'top', color: function () {}, fontSize: _this.fontSize(0.12), fontWeight: 'bold', marginTop: 15 }}

使用tooltip的formatter方法和es6的字符串模板`<img src="${require('@/assets/img/u123.png')}">`这样就动态引入图片了tooltip:{ formatter: function (params) { var Val = params.marker + params.data.source + `<img src="${require('@/assets/img/u123.png')}">` + params

legend：{ orient: 'vertical',}

areaStyle区域填充样式。设置后显示成区域面积图。areaStyle: { normal: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 1, color: "rgba(108,199,192

data: [{ itemStyle: { //看这个对象 color:{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset:0,color:'#EA5050' // 0% 处的颜色

仪表盘设置 radius:‘80%’ 来调整仪表盘大小series:[{ type:'gauge', radius:'100%;}]

yAxis：[{ splitLine:{ show:false,//不显示分割线 }}]

有时候拖动滚动条不想显示 dataZoom的文字但是dataZoom的textStyle是没有show属性的所以需要特别一点的办法把文字颜色设置成和dataZoom的背景颜色一模一样,从视觉上 就可以隐藏文字了dataZoom:[{ type:"slider", backgroundColor:"rgba(4, 28, 52, 1)", //想隐藏datazoom的文字,但是没有show属性,只能设置color颜色与背景一致,就不显示文字了 textStyle:{ color

有时候业务中，数组参数有的值为负数,但是前端不可以显示 负y轴(需求)在yAxis里面定义min:0 就可以不显示负y轴了yAxis: [{ min:0, }]

//dataZoom属性开启 dataZoom: [{ show: true, type:"slider" }],如有需求具体请看echarts官方文档官方文档//将此代码引入echarts配置中 //滚动条样式 dataZoom:[{ type: "slider", // show:_this.zoomShow == true?true:false, show:true,

北京市 116.4 39.9天津市 117.2 39.12河北省 石家庄市 114.52 38.05河北省 唐山市 118.2 39.63河北省 秦皇岛市 119.6 39.93河北省 邯郸市 114.48 36.62河北省 邢台市 114.48 37.07河北省 保定市 115.47 38.87河北省 张家口市 114.88 40.82河北省 承德市 117.93 40.97河北省 沧州市 116.83 38.3河北省 廊坊市 116.7 39.52河北省 衡水市

grid配置项：图标离容器的距离show:是否显示直角坐标系网格-----------值:true?falseleft:图表离容器左侧的距离-----------------值:number?百分比top:图表离容器顶部的距离-----------------值:number?百分比right:图表离容器右侧的距离---------------值:number?百分比bottom:图表离容器底部的距离------------值:number?百分比backgroundColor:网格背景色---

工作中会遇到echarts在地图上面标记点位，后端数据传给城市名和坐标轴给你以后，如何添加到echarts上面渲染呢echarts需要的数据例子{ name: "深圳", value: [114.271522, 22.753644]}name是城市名,value是坐标轴拿到数据后找到echarts的配置属性->series代码如下 series: [ // 常规地图 { type: 'map.

在axisLabel配置项里面使用echarts的方法就好了看formatter方法就行,如果当前文字长度大于6截取前6位+… axisLabel: { color: _this.xAxisAxisLabelColor, fontSize: _this.xAxisAxisLabelFontSize, fontFamily:'pingfang', rotate:_this.rotate, formatter: function (value) { return

xAxis.axisLabel. rotate刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。参数为number类型旋转的角度从 -90 度到 90 度rotate: 40 xAxis: [{ type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], axisLabel: { rotate: 40 } }],...