Echarts统计图使用记录

Nullo_o

已于 2022-03-10 16:32:30 修改

阅读量896

点赞数

分类专栏： JS/JQuery 文章标签： echarts javascript

于 2022-03-10 10:32:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_28332767/article/details/123394499

版权

JS/JQuery 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用Echarts库创建柱状图，包括设置提示框、网格、坐标轴、系列等属性，以及如何自定义颜色、文字样式和网格线。示例代码展示了柱状图的完整配置，帮助读者理解Echarts图表的制作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网地址：https://echarts.apache.org/examples/zh/index.html

1. 柱状图

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    // 修改鼠标移到柱子上时，显示的内容
                    formatter: function (params) {
                        console.log(params);//打印断点，会看到自己想要的后台数据
                        return '发电量：' + params[0].value+'MW';
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis_data,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#000000', //更改坐标轴文字颜色
                                fontSize: 15      //更改坐标轴文字大小
                            },
                            margin: 10			//X轴线与文字之间的距离
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#000000' //更改坐标轴颜色
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#ADFF2F',  //更改坐标轴文字颜色
                                fontSize: 16,      //更改坐标轴文字大小
                                fontWeight: 300    //字体的粗细
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ADFF2F' //更改坐标轴颜色
                            }
                        },
                        //修改横向网格线的颜色、宽度、线的类型
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#000000'],
                                width: 1,
                                type: 'solid'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '发电量',
                        type: 'bar',
                        barWidth: '60%',
                        data: series_data,
                        //柱子的颜色
                        itemStyle: {
                            normal: {
                                color: '#ADFF2F'
                            }
                        },
                    }
                ]
            };

            // 基于准备好的dom，初始化echarts图表
            var myChartBar = echarts.init(document.getElementById("chart"));
            // 过渡---------------------
            myChartBar.showLoading({
                text: '读取数据中...'  //loading话术
            });

            myChartBar.setOption(option);
            myChartBar.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: 0
            }); //设置默认选中高亮部分
            myChartBar.hideLoading();