ECharts 入门学习

已于 2023-09-18 16:43:30 修改
阅读量3.5k 收藏 26
点赞数 3
分类专栏： Vue+Element+axios+store(vuex) 框架/插件使用 文章标签： echarts 前端 javascript vue+echarts
于 2021-10-27 11:44:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gao_xu_520/article/details/84316237
版权

一 . 小点整理

简单使用

1、echarts柱状图x轴数据隔一个显示
xAxis: { 
	axisLabel: {
		interval:0 
	}
},
2、显示数值
柱状图上方显示数值
 series: [
	{ 	
		type: 'bar',
		itemStyle: {
			normal: {
				label: {
					show: true, //开启显示
					position: 'top', //在上方显示
					textStyle: { //数值样式
						color: 'black',
						fontSize: 12
					}
				}
			}
		}
	},
	]
折线图 显示数据
series: [{
			 type: 'line',
		 showSymbol: true,
		 label: {
			  normal: {
				   show: true,
				   position: 'top'
			  }
		 },
	}]
3.滚动条
 option = {
	dataZoom: [{
		type: 'slider',
		show: true,
		xAxisIndex: [0],
		left: '9%',
		bottom: -5,
		start: 10,
		end: 90 //初始化滚动条
	}],
}
4.显示每条数据的颜色
option = {
	legend: {
		data: ["西药费", "成药费", "草药费", "其他"]
	},
	
	series: [
		{ name: '西药费', type: 'bar' },
		{ name: '成药费', type: 'bar' },
		{ name: '草药费', type: 'bar' },
		{ name: '其他', type: 'bar' },
	]
};
5.统一颜色的设置
 option = {
    color: ['#01b0f1'],
}

 echarts x轴文字显示不全 

 解决方式：

（1）倾斜方式

xAxis: {

                    axisLabel: {

                        interval: 0,//坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推

                        rotate:290//右边，40 左边

                    }

}

 （2）调用formatter文字显示

axisLabel: {

                        interval: 0,

                        formatter: function (value) {

                            var ret = ""; //拼接加\n返回的类目项

                            var maxLength = 2; //每项显示文字个数

                            var valLength = value.length; //X轴类目项的文字个数

                            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数

                            if (rowN > 1) {

                                //如果类目项的文字大于3,

                                for (var i = 0; i < rowN; i++) {

                                    var temp = ""; //每次截取的字符串

                                    var start = i * maxLength; //开始截取的位置

                                    var end = start + maxLength; //结束截取的位置

                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧

                                    temp = value.substring(start, end) + "\n";

                                    ret += temp; //凭借最终的字符串

                                }

                                return ret;

                            } else {

                                return value;

                            }

                        },

                    },

axisLabel: {

                        interval: 0,

                        formatter: function (value,index) {

                            if (index % 2 != 0) {

                                return "\n\n" + value;

                            } else {

                                return value;

                            }

                        },

                    },

 饼图百分比精确度

series: [

                    {

                        type: "pie",

                        radius: "55%", //设置饼图大小

                        center: ["50%", "55%"], //设置饼图位置

                        label: { //饼图图形上的文本标签

                            normal: {

                                textStyle: {

                                    color: "#fff",

                                    fontWeight: "bold",

                                    fontSize: this.setFontSize(0.16), //文字的字体大小

                                },

                                formatter: function (data) {

                                    //  "{b}:{c}({d}%)",

                                    let a = data.name; //名称

                                    let b = data.percent.toFixed(1) + "%"; //百分比 保留整数

                                    let c = data.value; //值

                                    return a + ":" + c + "(" + b + ")";

                                },

                            },

                        },

                        data:

 [

                { name: "云票", value: 27 },

                { name: "云触", value: 25 },

                { name: "云书", value: 18 },

            ],

,

                    },

                ],

 低于多少值时，颜色变化（比如：20时，变成红色）

  series: [
        {
            data:  [ 120,150,80, 70,110,130,
            {
          value: 20,
          itemStyle: {//颜色设置
            color: '#f00'
          }
        }],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
            },
        },
    ],

 字体随着窗口变化而变化

methods: {
    getEcharts(newData) {
        // 绘制图表
        myChart.setOption({
            textStyle: {
                fontSize: this.setFontSize(0.16),//16px
                color: "#fff",
            },
        })
    },
    // echarts大屏字体自适应的
    setFontSize(res) {
        let docEl = document.documentElement,
            clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res * fontSize;

    }
},

echarts柱状图label位置 

//1. 调整数据
            this.$lodash.map(nowData, (el, key) => {
                this.$lodash.forEach(el, (val) => {
                    // 低于20时，颜色变成红色
                    if (parseInt(val.value) <= 20) {
                        val.itemStyle = {
                            color: "#f00",
                        };
                    }
                    // 大于等于500时，label位置调整
                    val.label = {
                        position:
                            parseInt(val.value) >= 500
                                ? "insideRight"
                                : "right",
                    };
                });
            });

设置 tooltip 背景框颜色文字颜色以及鼠标以上显示数据自定义

tooltip: {
	trigger: 'axis',//鼠标以上的数据
	backgroundColor: '#fff', //设置背景图片 rgba格式
	textStyle: {
		color: '#666' //设置文字颜色
	}
},

xAxis: {
  type: 'category',
  axisTick: {
	alignWithLabel: true
  },
  axisPointer: { //鼠标以上后背景颜色
	type: 'shadow'
  },
}

自定义显示

tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff', //设置背景图片 rgba格式
      borderColor: 'gray', //设置边框颜色
      textStyle: {
        color: '#666' //设置文字颜色
      },
      formatter: function (obj) {
        if (typeof obj == 'object') {
          return  '自定义显示数据'
        }
      }
    },
    xAxis: {
      axisPointer: { 
        type: 'shadow'// 鼠标以上后背景颜色
      },

把2个小点改成中间的点

    xAxis: {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
    }

数据显示在环中间

 option = {
    title: {
      text: 0,
      subtext: '全部任务',
      left: 'center',
      top: 'middle',
      subtextStyle: {
        fontSize: '14',
        color: '#999'
      },
      itemGap: 0, //主副标题的距离
      textStyle: {
        fontSize: '28',
        color: '#666',
        fontWeight: 'bold'
      }
    },
}

legend 工具显示 圆角 以及数据占比

    legend: {
      top: '30%',
      right: '10%',
      orient: 'vertical',
      textStyle: {
        fontSize: '14',
        color: '#999'
      },
      itemGap: 20,
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle' //圆角
    },
    // 回调函数
    formatter: function (obj) {
      let text
      if (typeof obj == 'string') {
        text = obj
      } else {
        text = obj.name
      }
      letdata = option.series[0].data //获取series中的data
      let totalVal =0
      let tarValue
      if (data) {
        for (letci = 0, l = data.length; i < l; i++) {
            totalVal += data[i].value
          if (data[i].name == text) {
            tarValue = data[i].value
          }
        }
      }
      var p = totalVal < 1 ? 0 : ((tarValue / totalVal) * 100).toFixed(1)
      return text + ' ' + ' ' + p + '%'
    },

饼状图线的长度设置

 labelLine: {
          normal: {
            length: 15, //第一条线
            length2: 5, //第二条线
            lineStyle: {
              width: 1, // 线条的宽度
              color: '#666' //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
            }
          }
        },

二.  样式

echarts折线图柱状图的坐标轴的颜色及样式的设置

基本用法请查看echarts官网。

图例legend的设置。

1.字体和颜色的设置

1

2

3

4

textStyle:{

                fontSize:15,

                color:'#fff'

            }

2.样式的设置

1

2

3

4

5

6

7

8

9

legend: {

           data:systemName,

           itemWidth:40,

           itemHeight:20,

           textStyle:{

               fontSize:15,

               color:'#fff'

           }

       }

　　可以根据需求自己设置。

 工具箱toolbox的设置

tooltip悬浮提示框

{

    type: 'line',

    lineStyle: {

        color: '#48b',

        width: 2,

        type: 'solid'

    },

   textStyle:{

      color:'#fff'

   }

}

x轴坐标xAxis的字体颜色大小，坐标线颜色，以及网格线的设置

xAxis : [

            {

                type: 'category',

                boundaryGap: false,

                data: time,

                splitLine:{show: false},//去除网格线

                splitArea : {show : true},//保留网格区域

                axisLine: {

                    lineStyle: {

                        type: 'solid',

                        color: '#fff',//左边线的颜色

                        width:'2'//坐标线的宽度

                    }

                },

                axisLabel: {

                    textStyle: {

                        color: '#fff',//坐标值得具体的颜色

                    }

                }

            }

        ]

yAsix的设置相同

yAxis : [

           {

               type : 'value',

               splitLine:{show: false},//去除网格线

               splitArea : {show : true},//保留网格区域

               axisLine: {

                   lineStyle: {

                       type: 'solid',

                       color:'#fff',

                       width:'2'

                   }

               },

               axisLabel: {

                   textStyle: {

                       color: '#fff'

                   }

               }

           }

       ]

三 .打印

 转成图片base64编码 就可以打印
    var jlcgImgBase64;

jlcgImgBase64 = myChart.getDataURL();
    document.getElementById('zktbImg').setAttribute('src',jlcgImgBase64)

<div id="zktb" style="width:800px;height:430px;float: left;display: none;" ></div>
<img id="zktbImg" style="width:800px;height:430px;float: left;" />
//获取折线图图 div(对象)datas(数据),dybzVal(靶值),sdVal(sd值)
function initChart(){
    // 图片base64编码
    var jlcgImgBase64;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('zktb'));
    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        legend: {},
        animation:false,//关闭动画
        xAxis:{
            type : 'category',//折线
            boundaryGap: false,//坐标轴与文字对齐
            data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
        },
        yAxis: {
            type: 'value',
            splitLine: {//网格线不显示
                show: false
            },
            min:30,//最小值
            max:100,//最大值
            "axisTick":{       //y轴刻度线
              "show":false
            },
            axisLabel : {// 坐标不写文字
                formatter: function(){
                      return "";
                }
            }
        },
        series: [{
            name: '值为：',
            type: 'line',//点与点间的连接线 类型
            data: [40,50,20,40,20,30,50,30,23,40,50,20,40,75],//数据
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
            
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    jlcgImgBase64 = myChart.getDataURL();
    //动态的渲染到打印html的标签上
    document.getElementById('zktbImg').setAttribute('src',jlcgImgBase64)
}

四. 地图下钻

获取地区的json的map 包：地图选择

<template>
    <div class="container">
        <div id="lineChart" style="height: 500px"></div>
    </div>
</template>

<script>
export default {
    name: "EffectScatter",
    data() {
        return {
            //设置
            mapChart: "",
            //区域的颜色
            colorArr: [
                "#FFB7DD",
                "#FF8888",
                "#FFEE99",
                "#FFFF00",
                "#CCFF33",
                "#99FF99",
                "#BBFFEE",
                "#CCDDFF",
                "#E38EFF",
                "#BA55D3",
                "#DDAA00",
                "#FFFF00",
                "#CC00CC",
                "#FF00FF",
                "#FF8C00",
                "#FFDEAD",
            ],
            //这是需要显示坐标的数据组
            coordinateData: [
                {
                    name: "平潭",
                    value: [119.791197, 25.503672, 223],
                },
                {
                    name: "福州市",
                    value: [119.306239, 26.075302, 223],
                },
                {
                    name: "南平市",
                    value: [118.178459, 26.635627, 188],
                },
                {
                    name: "宁德市",
                    value: [119.527082, 26.65924, 114],
                },
                {
                    name: "三明市",
                    value: [117.635001, 26.265444, 89],
                },
                {
                    name: "漳州市",
                    value: [117.661801, 24.510897, 187],
                },
                {
                    name: "莆田市",
                    value: [119.007558, 25.431011, 75],
                },
                {
                    name: "泉州市",
                    value: [118.589421, 24.908853, 336],
                },
            ],
        };
    },
    mounted() {
        this.getMapChart("350000");
    },
    methods: {
        // echarts初始化
        getMapChart(mapCode) {
            this.mapChart = this.$echarts.init(
                document.getElementById("lineChart")
            );
            //获取本得地图json 包
            const data = require("../echarts/map/" + mapCode + ".json");
            if (data) {
                this.$echarts.registerMap("福建", data);
                let areaColor = [];
                for (var i = 0; i < data.features.length; i++) {
                    //设置每个区域的颜色
                    areaColor.push({
                        name: data.features[i].properties.name,
                        itemStyle: {
                            areaColor: this.colorArr[i],
                            color: "#fff",
                        },
                    });
                }
                this.extendsMap({
                    mapName: "福建", // 地图展示
                    mapCode: mapCode, //当前的地图json 包的d代码
                    areaColor: areaColor,
                    goDown: true, // 是否下钻
                    // 下钻回调 type 表示但双击
                    callback: function (row, option, instance, type) {
                        if (type == "click") {
                            //单击
                            console.log(row, option, instance, "单击");
                        } else {
                            //双击
                            console.log(row, option, instance, "双击");
                        }
                    },
                    // 数据展示
                    data: this.coordinateData,
                });
            }
        },
        /**
         * opt 设置
         */
        extendsMap(opt) {
            let defaultOpt = {
                mapName: "china", // 地图展示
                goDown: false, // 是否下钻
                bgColor: "#404a59", // 画布背景色
                areaColor: [], //区域颜色
                data: [], //坐标数据
                // 下钻回调(点击的地图名、实例对象option、实例对象)
                callback: function (name, option, instance) {},
            };
            if (opt) opt = $.extend(defaultOpt, opt);
            let option = {
                backgroundColor: opt.bgColor,
                // 鼠标以上 显示的窗口内容
                tooltip: {
                    show: false,
                },
                geo: {
                    map: opt.mapName,
                    zoom: 1.2,
                    roam: true,
                    itemStyle: {
                        areaColor: "#4474ec", // 区域颜色
                        borderColor: "#fff", // 区域边线颜色
                    },
                    label: {
                        show: false, // 是否展示名称
                    },
                    roam: true, //是否允许缩放
                    //鼠标以上的效果 区域的变化
                    emphasis: {
                        // 地图区域上的
                        label: {
                            show: false, //
                        },
                        itemStyle: {
                            areaColor: "#42b983", // 高亮时区域颜色
                        },
                    },
                    //设置每个区域的颜色
                    regions: opt.areaColor,
                },
                // 这是 瞄点坐标设置
                series: [
                    {
                        name: "Top 5",
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        zlevel: 2,
                        rippleEffect: {
                            //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: "stroke", //波纹绘制方式 stroke, fill
                            scale: 3, //波纹圆环最大限制，值越大波纹越大
                        },
                        //坐标上 显示的文字
                        label: {
                            //圆点显示
                            normal: {
                                show: true,
                                position: "right", //显示位置
                                offset: [5, 10], //偏移设置
                                formatter: function (params) {
                                    //圆环显示文字
                                    return (
                                        params.data.name +
                                        ":" +
                                        params.data.value[2]
                                    );
                                },
                                color: "#ffffff",
                                lineHeight: 25,
                                padding: [3, 4, 5, 6],
                                backgroundColor: "#0000007d",
                                fontSize: 15,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        symbol: "circle",
                        symbolSize: function (val) {
                            return 10 + val[2] * 0; //圆环大小
                        },
                        itemStyle: {
                            normal: {
                                show: false,
                                color: "#f00",
                            },
                        },
                        //这是需要显示坐标的数据组
                        data: opt.data,
                    },
                ],
            };
            this.mapChart.setOption(option);
            var timeFn = "";
            // 单击事件
            this.mapChart.on("click", function (params) {
                clearTimeout(timeFn);
                //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
                timeFn = setTimeout(function () {
                    if (opt.goDown && params.name) {
                        opt.callback(params, option, opt.mapCode, "click");
                    }
                }, 250);
                // 注意：
                //如果要获取点击区域该区域的数据（params.data），这时要点在描点上，否则获取不到 data的数据
            });
            //绑定双击事件
            this.mapChart.on("dblclick", function (params) {
                clearTimeout(timeFn);
                if (opt.goDown && params.name) {
                    opt.callback(params, option, opt.mapCode, "dblclick");
                }
            });
        },
    },
};
</script>

参考案例:

Make A Pie

五.问题

1.There is a chart instance already initialized on the dom.

初始化前要先销毁 echarts.dispose()

如小案例：
<div id="echarts-main-left"></div>
<div id="echarts-main-right" ></div>
const dealDta = obj => {
  proxy.$nextTick(() => {
    disposeEcharts()
    echartsInit({
      id: 'echarts-main-left',
      color: ['#FF7A8C', '#8167F5', '#52C1F5'],
      name: '任务类型',
      data: obj.taskType
    })
    echartsInit({
      id: 'echarts-main-right',
      color: ['#82d588', '#fec03d', '#52c1f5'],
      name: '任务处理情况',
      data: obj.dealState
    })
  })
}

/**
 * echarts 配置
 * @param {*} dat 数据配置
 */
function echartsInit(dat) {
  let chartDom = document.getElementById(dat.id)
  let myChart = echarts.init(chartDom, 'macarons')
  let option = {//...}
  option && myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

const disposeEcharts = () => {
  // 销毁echarts实例
  let chartDom = document.getElementById('echarts-main-left')
  echarts.dispose(chartDom)

  chartDom = document.getElementById('echarts-main-right')
  echarts.dispose(chartDom)
}
onBeforeUnmount(() => {
  disposeEcharts()
})

小案例

1,饼图，柱形图，折线图

 myChart.clear();
window.onresize = function() {
   myChart.resize();
};
var option = {};
if (type == 'pie') {
//饼图
   option = {
		color: ['#01b0f1', '#92d14f'],
		tooltip: {
			 trigger: 'item',
			 formatter: "{b} : {c} ({d}%)"
		},
		legend: {
			 orient: 'vertical',
			 left: 'left',
			 data:['支付宝支付', '微信支付']
		},
		series: [{
			 name: '',
			 type: 'pie',
			 radius: '55%',
			 center: ['50%', '60%'],
			 data:['34', '100'],
			 itemStyle: {
				  emphasis: {
					   shadowBlur: 10,
					   shadowOffsetX: 0,
					   shadowColor: 'rgba(0, 0, 0, 0.5)'
				  }
			 }
		}]
   }
} else if (type == 'line') {
//折线图
   option = {
		color: ['#01b0f1'],
		visualMap: [{
			 show: false,
			 type: 'continuous',
			 seriesIndex: 0,
			 min: 0,
			 max: 400
		}],
		tooltip: {
			 trigger: 'axis'
		},
		xAxis: [{
			 data:["2019-01-01", "2019-01-02", "2019-01-03", "2019-01-04", "2019-01-05"]
		}],
		yAxis: [{
			 splitLine: {
				  show: false
			 }
		}],
		series: [{
			 type: 'line',
			 showSymbol: true,
			 label: {
				  normal: {
					   show: true,
					   position: 'top'
				  }
			 },
			 data:[10, 11, 12, 13, 14]
		}]
   };
} else {
//柱形图
   option = {
		color: ['#01b0f1'],
		xAxis: {
			 type: 'category',
			 data: ['内科', '外科', '儿科', '骨科', '小额', '脑壳', '尿液科']
		},
		yAxis: {
			 type: 'value'
		},
		series: [{
			 data:[120, 200, 150, 80, 70, 110, 130],
			 type: 'bar',
			 barWidth: '30%',
		}]
   }

}
myChart.hideLoading();
myChart.setOption(option);

<div id="zktb" style="width: 800px;height:430px;" >


// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('zktb'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        legend: {},
        xAxis:{
            type : 'category',//折线
            boundaryGap: false,//坐标轴与文字对齐
            data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
        },
        yAxis: {
            type: 'value',
            splitLine: {//网格线不显示
                show: false
            },
            "axisTick":{       //y轴刻度线
              "show":false
            },
            axisLabel : {// 坐标不写文字
                formatter: function(){
                      return "";
                }
            }
        },
        series: [{
            name: '销量',
            type: 'line',//点与点间的连接线 类型
            data: [10,20,30,35,45,56,20,30,23,40,50,20,40,30,23,40,50,20,40,20,30,50,30,23,40,50,20,40,75],//数据
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },//显示数据在点上
            markLine: {
                symbol:'none',//去掉箭头
                animation:false,//去掉动画效果
                data : [
                    {
                        xAxis: 0, 
                        yAxis: 10,
                        itemStyle:{
                            normal:{
                                lineStyle:{type:'solid',color:'#F00'},//设置线的样式
                                label:{show:true,formatter:'X-3SD'}//显示文字在右边
                            }
                        },
                    },
                    {
                        xAxis: 0, 
                        yAxis: 20,
                        itemStyle:{
                            normal:{
                                lineStyle:{type:'dashed',color:'#6f327dfa'},
                                label:{show:true,formatter:'X-2SD'}
                            }
                        },
                    },
                    {
                        xAxis: 0, 
                        yAxis: 30,
                        itemStyle:{
                            normal:{
                                lineStyle:{type:'solid',color:'#00a65a'},
                                label:{show:true,formatter:'X-SD'}
                            }
                        },
                    },
                    {
                        xAxis: 0, 
                        yAxis: 40,
                        itemStyle:{
                            normal:{
                                lineStyle:{type:'solid',color:'#000'},
                                label:{show:true,formatter:'靶值'}
                            }
                        },
                    },
                    {
                        xAxis: 0, 
                        yAxis: 50,
                        itemStyle:{
                            normal:{
                                lineStyle:{type:'solid',color:'#00a65a'},
                                label:{show:true,formatter:'X+SD'}
                            }
                        },
                    },
                    {
                        xAxis: 0, 
                        yAxis: 60,
                        itemStyle:{
                            normal:{
                                lineStyle:{type:'dashed',color:'#6f327dfa'},
                                label:{show:true,formatter:'X+2SD'}
                            }
                        },
                    },
                    {
                        xAxis: 0, 
                        yAxis: 70,
                        itemStyle:{
                            normal:{
                                lineStyle:{type:'solid',color:'#F00'},//设置线的样式
                                label:{show:true,formatter:'X+3SD'}//显示文字在右边
                            }
                        },
                    }
                ]
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

面条请不要欺负汉堡
关注
  • 3
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts配置项详细解释
一起学习一起进步~
04-20 2453
shadowStyle：axisPointer.type为shadow时有效。crossStyle：axisPointer.type为cross时有效。splitArea ：坐标轴在 grid 区域中的分隔区域，默认不显示。splitLine： 坐标轴在 grid 区域中的分隔线设置。axisLabel：坐标轴刻度标签的相关设置。axisPointer：坐标轴指示器配置项。axisLine：坐标轴轴线相关设置。axisTick：坐标轴刻度相关设置。label：坐标轴指示器的文本标签。
ECharts学习笔记
Beatingworldline的博客
11-27 449
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 有了echarts 再设置option变量 0、JSP引入echarts： 1、准备具备宽高的DOM容器放图表 设置好id或class以便获取 2、获得var myChart：使用echarts对象方法init返回一个echarts对象(var myChart=echarts.init(document.getElementById(""))???? 3、获得var option：参数设置使用JSON格
EChart简单入门
2301_79683791的博客
04-06 820
echart直接入门
echarts的xAxis的axisLabel的使用
weixin_43258184的博客
04-06 2万+
xAxis的axisLabel是用来设置x轴的刻度以及一些参数的设置。 axisLabel: { interval: 10, formatter: (value, index) => { // 1小时=3600秒 return `${(value / 3600).toFixed(0)}h`; }, inside: false,
四种为 echarts 条形图柱子设置不同颜色的方法，总有一款适合你
最新发布
weixin_57818879的博客
05-30 4059
主要通过直接赋值、回调函数静态映射和回调函数动态生成（包括渐变色）这几种方式来设置不同柱子的不同颜色。具体采用哪种方法取决于需求的复杂度和个性化程度，我相信总有一款适合你。
echarts中boundaryGap用法
qq_44687755的博客
07-31 4万+
以下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.js">&...
ECharts设置X轴axisLabel自适应
09-24 2万+
制作echarts的柱状图时我们发现axisLabel的长度过长时文字会堆叠在一起: 有些网站选择倾斜axisLabel来显示,或者让axisLabel完全竖直,效果都很差,我这里采用计算x轴刻度宽度的方法来进行换行处理: echarts将柱状图分为grid,X轴Label和Y轴Label三个部分; 我们首先计算每个X轴Label大致可以显示多少个字: var xAxisData = ["something...","something...","something...","someth
echarts折线图设置Y轴的boundaryGap，使折线尽可能地在Y轴居中
WanweI897的博客
01-24 7855
1.如上图，没有设置boundaryGap时折线会在Y轴偏上位置，此时一般设置Y轴boundaryGap在最大值的延伸范围为1,这时折线会居中。 但是当我们并不确定折线使用的数据时，就无法直接确定boundaryGap的值来实现居中。 此时，就需要去计算boundaryGap的值： 2.根据上图，要使折线上下居中，就需要： (b + 1)* max - max = min - 0 得到 b = min / max 3.此时我们在实际情况中求boundaryGap： b = Math.min(...y.
Echarts基础教程学习笔记
11-14
Echarts基础教程学习笔记，Echarts简介、课程介绍、技能、设备、网络环境的要求和建议
Echarts入门到精通
12-03
数据可视化是将复杂的数据以图形或图像的形式呈现出来，以便于人们更直观地理解数据背后的信息。...通过学习和掌握ECharts，开发者能够有效地将数据转化为生动的信息展示，提升数据分析和决策的效率。
echarts入门示例
11-12
通过深入学习和熟练掌握ECharts，前端开发者可以轻松地在网页上展示复杂的数据，并提供丰富的交互体验。无论是简单的静态数据还是动态的AJAX数据，ECharts 都能游刃有余地处理，是Web应用数据展示的理想选择。
echarts3入门学习视频讲解
04-03
echarts3 入门学习资料，视频讲解, 源码及案例，针对想学图形展示的初学者，百度云链接，下载便能学习!
关于echarts学习
09-21
在"关于ECharts学习"的主题中，我们将深入探讨ECharts的基础知识、核心概念以及实际应用技巧。 1. **ECharts安装与引入**： - ECharts可以通过CDN链接直接引入，也可以通过npm或yarn进行本地安装。 - 引入ECharts...
echarts-doc
01-26
"echarts-doc" 是ECharts的官方文档，包含详细的API、教程、示例和指南，是学习和使用ECharts不可或缺的资源。 在"echarts-doc-master"这个压缩包中，我们可以预期找到以下关键知识点： 1. **ECharts基本概念**：...
01.数据可视化_ECharts基础011
08-03
- **快速上手**：ECharts的入门简单，只需四步：引入库文件、准备图表容器、初始化实例对象和设置配置项，即可快速创建图表。 4. ECharts的快速上手实践 - **步骤1**：将ECharts.js库文件引入HTML页面。 - **...
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 10万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
【echarts】echarts中的boundaryGap导致的问题
bug处理进行时
11-18 6472
echarts中的boundaryGap导致的问题 问题描述 解决前 在使用柱状图时，出现图表在刻度尺下面的情况 解决后 解决方式 // 设置类目轴的boundary的值为true yAxis: { type: 'category', boundaryGap : true, data: ['巴西','印尼'], max:func...
[Echarts][全网唯一]X轴axisLabel随文字长度自动旋转的实现思路
weixin_42274805的博客
06-15 2716
X轴axisLabel随文字长度自动旋转的实现思路
echarts 快速学习
05-24
学习 ECharts 的最佳方法是通过官方文档进行学习。下面是一些快速入门 ECharts 的步骤： 1. 在你的 HTML 文件中引入 ECharts 库。 ``` <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值