Echarts

已于 2024-02-18 20:25:17 修改
阅读量1k 收藏 16
点赞数 18
文章标签： echarts javascript ecmascript
于 2023-12-04 18:56:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pzg3240432140/article/details/134790537
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>


     <!-- js -->
     <script src="lib/echarts.min.js"></script>
    <script>
        
        //初始化echarts
       var myChart = echarts.init(document.querySelector('div'))

       //配置项
       var option = {
        xAxis:{
            type: 'category', //类目轴
            data: ['小明', '小红', '小王']
        },
        yAxis: {
            type: 'value' //数值轴
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: [79, 92, 87]
            }
        ]
       }
       // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
</body>
</html>

xAxis：直角坐标系中x轴

yAxis：直角坐标系中的y轴

series：系列列表。每个系通过type决定自己的图表类型

柱状图的基本配置：

        //最大/最小值

            series: {
                // 最大/小值
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值'},
                        { type: 'min', name: '最小值'}
                    ]
                }
        }

        //平均值

            series: {
                // 平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                }
        }

         //数值显示

            series: {
                //数值显示
                label: {
                    show: true
                }

        //柱状宽度

            series: {
                //柱状宽度
                barWidth: '60%',
                data: [88, 92, 63, 77, 94, 80, 72, 86]
            }

通用配置

        title：标题配置

 var option = {
            //标题
            title: {
                text: '成绩展示',
                textStyle: {
                    color: 'pink'
                },
                borderWidth: 5,
                borderColor: 'black',
                borderRadius: 5,
                left: 50,
                top: 10
            }
}

        tooltip: 提示框组件

                用于配置鼠标滑过或点击图表是显示的显示框

               触发器类型：trigger

                item, axis

  //显示提示框
 var option = {
    tooltip: {
        trigger: 'item'
            }
}
  //显示提示框
 var option = {
    tooltip: {
        trigger: 'axis'
        // 设置背景
        axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
                width: 66,
                color: 'red'
            }
        }
   }
}

        触发时机：triggerOn

                mouseover，click

 var option = {
           
            //显示提示框
            tooltip: {
                //触发的时机
                triggerOn: 'click'
            },

        格式化：formatter

                字符串模板

                             模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。

 var option = {  
            //显示提示框
            tooltip: {
                //字符串模板
                formatter: '{c}'
            },

                回调函数

 var option = {
            //显示提示框
            tooltip: {
                //回调函数
                formatter: function(e){
                    console.log(e)
                }
            },

        toolbox: ECharts提供的工具栏

                 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

                显示工具栏feature

                saveAslmage, dataView, restore, dataZoom, magicType

 var option = {
            toolbox: {
                feature: {
                    saveAsImage: {},//导出图片
                    dataView: {},// 数据视图
                    restore: {}, // 重置
                    dataZoom: {}, // 数据区域缩放
                    magicType: {
                        type: ['bar', 'line']
                    }, //动态图表类型切换
                }
            },
            },

        legend：图列

                用于筛选系列，需要和series配合使用

                legend中的data是一个数组

                legend中的data的值需要和series数组中某组数据的name值一致

 var option = {
      // 图列
            legend: {
                data: ['语文', '数学'],
                orient: 'vertical', // 改变图例为竖直
                itemWidth: 20px, // 每项图例的宽
                itemHeight: 13px, // 每项图例的高
                itemGap: 10px, 每项图例的间距
                textStyle: {
                    fontSize: 12px // 字体大小
                }
            },
},

折线图

        随着时间的变化趋势

        标记

                最大/小值        

                markPoint

  series: [
                {
                    name: '销量',
                    type: 'line',
                    data: yDataArr,
                    //最大/小值
                    markPoint: {
                        data: [
                             {
                                type: 'max'
                            },
                            {
                                type: 'min'
                            }
                        ]
                    },
    }
]

        平均值

                markLine

   series: [
                {
                    // 平均值
                    markLine: {
                        data: [
                            {
                                type: 'average'
                            }
                        ]
                    },
    }
]

        标注区间

                markArea

series: [
                {
                    //标注区间
                    markArea: {
                        data: [
                            [
                                {
                                    xAxis: '一月'
                                }, 
                                {
                                    xAxis: '二月'
                                }
                            ],
                            [
                                {
                                    xAxis: '七月'
                                },
                                {
                                    xAxis: '八月'
                                }
                            ]
                        ]
                    }
    }
]

        线条控制：平滑 风格

                平滑

                        smooth

series: [
                {
        smooth: true,
    }
]

                风格 

                        lineStyle

series: [
                {
    //线的样式
        lineStyle: {
        color: 'green', 
        type: 'solid' // dashed dotted solid
                    }
    }
]

                填充风格

                                areaStyle

            series: [
                {
                    //面积填充
                    areaStyle: {
                        color: 'green'
                    }
                }
            ]
            
        }

紧挨边缘

        boundaryGap

xAxis: {
                type: 'category', 
                data: xDataArr,
                //紧挨边缘
                boundaryGap: false
            },

缩放：脱离0值比例 

        数据差距不大

        scale

 yAxis: {
                type: 'value',
                scale: true
            },

堆叠

        stack

series: [
                {
                    name: '销量1',
                    type: 'line',
                    data: yDataArr1,
                    //堆叠
                    stack: 'all',
        },
        {
                    name: '销量2',
                    type: 'line',
                    data: yDataArr1,
                    //堆叠
                    stack: 'all',
        }
]

散点图

       图表类型：

              在series下设置type：scatter

                xAxis 和 yAxis的type都要设置为value

        调整：

                将坐标轴都设置为脱离0值比例，scale

 yAxis: {
                type: 'value',
                scale: true
            },
 xAxis: {
                type: 'value',
                scale: true
            },

气泡图效果 

         设置散点的大小不同

series: [
    {
        type: 'scatter',
        data: [[10, 2],[11, 15]],
         // symbolSize: 5 
        // 回调函数
        symbolSize: function(arg){
        console.log(arg)
        return 5
        }
    }
]

        散点的颜色不同

series: [
    {
        type: 'scatter',
        data: [[10, 2],[11, 15]],
         // itemStyle: {
                color: 'green'
            }
        // 回调函数
        itemStyle: {
            color: function(arg){
                console.log(arg)
                return 'green'
            }
        }
    }
]

      涟漪动画

series: [
    {
        type: 'effectScatter',
        // 涟漪动画触发时机
        showEffectOn: 'emphasis', // render 渲染完生效, emphasis 移入划过生效 
        // 涟漪动画的大小和范围
        rippleEffect: {
            scale: 5, // 涟漪大小
            brushType: 'stroke' // 设置涟漪为空心效果
        }
        data: [[10, 2],[11, 15]]
    }
]

 直角坐标系的常用配置

                柱状图        折线图        散点图

          网格 grid

        grid是用来控制直角坐标系的布局和大小

var option = {
   grid: {
        show: true, // 显示网格
        borderWidth: 10, // 设置边框大小
        borderColor 'red', // 设置边框颜色
        left: 120,
        top: 120,
        containLabel: true // 距离是包含坐标轴上的文字
    }
}

        坐标轴 axis

                一个grid中最多有两种位置的x轴和y轴

                坐标轴类型 type

                        value：数值轴，会自动从目标数据中读取数据

                        category：类目轴，该类型必须通过data设置类目数据

                显示位置 position

                        xAxis: 可取值为 top或者bottom

                        yAxis: 可取值为 left 或者right

        echarts隐藏坐标轴、刻度线、坐标值、网格 —— 全部隐藏
xAxis: {
    show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick:{
          show:false // 不显示坐标轴刻度线
    },
    axisLine: {
          show: false, // 不显示坐标轴线
    },
    axisLabel: {
          show: false, // 不显示坐标轴上的文字
    },
    splitLine:{
         show:false // 不显示网格线
    },
},

         区域缩放 dataZoom

                dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有

                dataZoom是一个数组，意味着可以配置多个区域缩放器

                        类型 type

                                slider: 滑块

                                inside: 内置，依靠鼠标滚轮或双指缩放

var option = {
    dataZoom: [
        {
            type: 'slider' // slider, inside
        },
    ]
}

                        指明产生作用的轴

                                xAxisIndex: 设置缩放组件控制的是那个x轴，一般写0即可

                                yAxisIndex: 设置缩放组件控制的是哪个y轴，一般写0即可

var option = {
    dataZoom: [
        {
            type: 'slider' // slider, inside
            xAxisIndex: 0
        },
        {
            type: 'slider',
            yAxisIndex: 0
        }
    ]
}

                指明初始状态的缩放情况

                       start: 数据窗口范围的起始百分比

                        end: 数据窗口范围的结束百分比

var option = {
    dataZoom: [
        {
            type: 'slider' // slider, inside
            xAxisIndex: 0
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            start: 0,
            end: 50
        }
    ]
}

饼图

        在series下设置 type: pie

var option = {
    series: [
        {
            type: 'pie',
            data: [{name: '淘宝', value: 1123},{name: '京东', value: 2343}] // 数组包对象
        }
    ]
}

        饼图文字的显示

var option = {
    series: [
        {
            type: 'pie',
            data: [{name: '淘宝', value: 1123},{name: '京东', value: 2343}], // 数组包对象
            label: { //饼图文字的显示
                show: true, 显示文字
                // formatter: 'hehe'
                formatter: function(arg){
                    console.log(arg)
                    return arg.name
                }
            }
        }
    ]
}

                设置半径

var option = {
    series: [
        {
            type: 'pie',
            data: [{name: '淘宝', value: 1123},{name: '京东', value: 2343}], // 数组包对象
            // radius: 20 // 饼图的半径
            radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半进行百分比设置
        }
    ]
}

                圆环设置

var option = {
    series: [
        {
            type: 'pie',
            data: [{name: '淘宝', value: 1123},{name: '京东', value: 2343}], // 数组包对象
            radius: ['50%', '75%'], // 圆环设置 第0个元素代表的是内圆半径 第1个元素外圆的半径
        }
    ]
}

                 南丁格尔图 

                                每个区域的半径都不同

var option = {
    series: [
        {
            type: 'pie',
            data: [{name: '淘宝', value: 1123},{name: '京东', value: 2343}], // 数组包对象
            roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
  
        }
    ]
}

                设置选中效果

var option = {
    series: [
        {
            type: 'pie',
            data: [{name: '淘宝', value: 1123},{name: '京东', value: 2343}], // 数组包对象
            roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
            // selectedMode: 'single' // 选中的效果，能够将选中的区域偏离圆点一小段距离
            selectedMode: 'multiple',
            selectedOffset: 30 // 设置偏离距离 
        }
    ]
}

地图

 var myCharts = echarts.init(document.querySelector('div'))
        axios({
            url: 'json/china.json'
        }).then(result => {
            console.log(result);
           echarts.registerMap('chinaMap', result.data)
           var option = {
            geo: {
                type: 'map',
                map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
            }
           }
           myCharts.setOption(option)
        })

        缩放拖动

var option = {
            geo: {
                type: 'map',
                map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                roam: true // 设置缩放以及拖动效果
            }

}

         名称显示

var option = {
            geo: {
                type: 'map',
                map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                label: {
                    show: true // 展示标签
                }
            }

        初始化缩放比例

var option = {
            geo: {
                type: 'map',
                map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                zoom: 1 // 设置初始化缩放比例 默认值为1
            }

         地图中心点

var option = {
            geo: {
                type: 'map',
                map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                center: [87.617733, 43.792818]
            }

         不同的城市显示不同的颜色

                1.城市的空气质量数据设置给series

                2.将series下的数据和geo关联起来

                4.结合visualMap配置使用

   var option = {
            geo: {
                type: 'map',
                map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                roam: true, // 设置缩放以及拖动 效果
                label: {
                    show: true
                }
            },
            series: [
                {
                    data: airData,
                    geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                    type: 'map'
                }
            ],
            visualMap: {
                min: 0,
                max: 300,
                inRange: {
                    color: ['white', 'red'] // 控制颜色渐变的范围
                },
                calculable: true // 出现滑块
            }
           }

        地图和散点图结合

 series: [
                {
                    data: airData,
                    geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                    type: 'map'
                },
                {
                    data: scaleData, // 配置散点的坐标数据
                    type: 'effectScatter',
                    coordinateSystem: 'geo', // 指明散点使用的坐标系统 geo的坐标系统
                    rippleEffect: {
                        scale: 10 // 设置涟漪动画的比例
                    }
                }
            ],

雷达图

    var dataMax = [
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '续航',
        max: 100
      }
    ]
    var option = {
      radar: { 
        indicator: dataMax, // 配置各个维度的最大值
      },
      series: [
        {
          type: 'radar', // radar 此图表时一个雷达图
          data: [
            {
              name: '华为手机1',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中兴手机1',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]
    }
    mCharts.setOption(option)

        显示数值

 series: [
        {
          type: 'radar', // radar 此图表时一个雷达图
           label: { // 设置标签的样式
            show: true // 显示数值
          },
          data: [
            {
              name: '华为手机1',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中兴手机1',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]

        区域面积

 series: [
        {
          type: 'radar', // radar 此图表时一个雷达图
          areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
          data: [
            {
              name: '华为手机1',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中兴手机1',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]

                绘制类型

 var option = {
      radar: { 
        indicator: dataMax, // 配置各个维度的最大值
        shape: 'polygon' // 配置雷达图最外层的图形 circle polygon
      }
}

仪表盘

         

 var myCharts = echarts.init(document.querySelector('div'))
        var option = {
            series: [
                {   
                    type: 'gauge',
                    data: [
                        {
                            value: 97
                        } // 每一个对象代表一个指针
                    ]
                }
            ]
        }
        myCharts.setOption(option)

        数值范围

                max, min

series: [
                {   
                    type: 'gauge',
                    data: [
                        {
                            value: 97
                        } // 每一个对象代表一个指针
                    ],
                    min: 50 // min max 控制仪表盘数值范围
                }
            ]

        多个指针差异

                itemStyle

 series: [
                {   
                    type: 'gauge',
                    data: [
                        {
                            value: 67,
                            itemStyle: { // 指针的样式
                                color: 'pink' // 指针的颜色
                            }
                        },
                        {
                            value: 97,
                            itemStyle: { // 指针的样式
                                color: 'red' // 指针的颜色
                            }
                        } // 每一个对象代表一个指针
                    ],
                    min: 50 // min max 控制仪表盘数值范围
                }
            ]

七个图表小结

bar 柱状图

line 折线图

scatter 散点图 / effectScatter 涟漪散点图

pie 饼图

map 地图

radar 雷达图

gauge 仪表图

主题

        内置主题

                eCharts中默认内置了两套主题： light dark

                在初始化对象方法init中可以指明

                        var myChart = ehcarts.init(dom,'light')                 

        自定义主题

                        1.在官网的主题编辑器中编辑主题

                        2.下载主题，是个js文件

                        3.引入主题js文件

                        4.在init方法中使用主题

                  var myChart = ehcarts.init(dom,'itcast')      

调色盘

        1.主题调色盘

        2.全局调色盘

option: {
    color: ['red', 'green', 'blue',],
}

          3.局部调色盘

series:[{
    type: 'bar',
    color: ['red', 'green', 'blue',],
}]

        颜色渐变

                线性渐变

 series: [
            {
                name: '语文',
                type: 'bar',
                data: [79, 92, 87],
                itemStyle: {
                        color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, color: 'red' // 0%处的颜色为红色
                            },
                            {
                                offset: 1, color: 'blue' // 100%处的颜色为蓝
                            }
                        ]
                    }
                }
            }
        ]

        径向渐变

 series: [
            {
                name: '语文',
                type: 'bar',
                data: [79, 92, 87],
                itemStyle: {
                        color: {
                        type: 'radial', // 径向渐变
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [
                            {
                                offset: 0, color: 'red' // 0%处的颜色为红色
                            },
                            {
                                offset: 1, color: 'blue' // 100%处的颜色为蓝
                            }
                        ]
                    }
                }
            }
        ]

样式

        直接样式

                textStyle

var option = { 
    title: {
            text: '图表',
            textStyle: {
                color: 'red'
            }
        }
}

                itemStyle

 series: [
            {
                name: '语文',
                type: 'bar',
                data: [79, 92, 87],
                itemStyle: {
                        color: 'green'
                }
            }
        ]

               lineStyle        areaStyle  label

                高亮样式

 series: [
            {
                name: '语文',
                type: 'bar',
                data: [79, 92, 87],
                emphasis: {
                    itemStyle:{
                        color: 'blue'
                    }
                }
            }
        ]

图表自适应

// 监听window窗口大小变化的事件
window.onresize = function(){
    // 调用echarts实例对象的resize方法
    myCharts.resize()
}
window.addEventListener('resize',function(){})

// 第二种写法
window.onresize = myCharts.resize

加载动画

        显示加载动画

myCharts.showLoading()

        隐藏加载动画 

myCharts.hideLoading() 

动画的配置项

                开启动画

animation: true 

                动画时长

animationDuration: 5000 // 以毫秒为单位 

                缓动动画 -- 缓动示例

animationEasing: 'bounceOut’  

                动画阀值

animationThreshold: 8

单种形式的元素数量大于这个阀值时会关闭动画 

图表事件监听

        在vue中

  methods: {
    // 初始化图表
    initChart () {
      this.chartsInstance = this.$echarts.init(this.$refs.seller_ref)
      // 对图表对象进行鼠标事件的监听
      this.chartsInstance.on('mouseover', () => {
        clearInterval(this.timeId)
      })
      this.chartsInstance.on('mouseout', () => {
        this.startInterval()
      })
    },
}

逗你味
关注
  • 18
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 节点拖拽
weixin_43931625的博客
11-09 3931
echarts 节点拖拽
echarts-5.4.3
03-02
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它基于 SVG+Canvas 技术，提供了丰富的图表类型、灵活的交互功能以及高度自定义的可能性。ECharts 5.4.3 版本是该库的一个稳定版本，包含了之前版本的所有...
ECharts社区 合集整理
sanghongxv的博客
07-08 5万+
持续更新......
echarts下载
HenryXun的博客
11-16 6716
关于echarts下载，官网上有三种方法，我这里推荐使用第三种方法：选择需要的模块，在线定制下载。 可以自由选择需要的图表、坐标系、组件进行打包下载。 这里我选择的是5.2.2版本，并且选择了所有的图表、坐标系、组件，其他选项中包括的SVG渲染、兼容IE8、工具集和代码压缩都选择了，可谓是真全呐，哈哈~~~ 选择下载后，会loading一会儿，最后得到一份echarts.min.js文件 完成了，操作很方便。 ...
在vue中使用echarts
做笔记\记录遇到的程序bug
03-04 6万+
1、安装
Echarts 柱形图最全详解
热门推荐
PinkCoder
04-15 14万+
Echarts 柱形图
Echarts y轴相关配置
蓑笠翁
09-03 2万+
使用Echarts的坐标轴配置，如y轴位置，y轴偏移量、y轴刻度、y轴最大最小值、次刻度、轴间隔等；
ECharts官网地址
weixin_50680057的博客
10-05 2万+
https://echarts.apache.org/zh/index.html
echarts地图3D效果
qq_35973440的博客
02-27 6095
echart图表3D效果 利用gco
ECharts 饼状图颜色设置
qq_38778882的博客
05-10 9753
ECharts 饼图颜色设置
echarts CDN 地址
yuanwen52的博客
09-17 5226
echarts (v5.1.2) - ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 P
echarts2.2.7
06-28
ECharts 2.2.7 是一个开源的、基于 JavaScript 的数据可视化库，它由百度公司开发并维护。这个版本的 ECharts 提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图等，适用于各种数据分析和展示需求。"有静态...
echarts-doc
01-26
"echarts-doc" 是ECharts的官方文档，包含详细的API、教程、示例和指南，是学习和使用ECharts不可或缺的资源。 在"echarts-doc-master"这个压缩包中，我们可以预期找到以下关键知识点： 1. **ECharts基本概念**：...
echarts世界geojson数据
04-02
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，适用于各种Web数据可视化场景。在“echarts世界geojson数据”这个主题中，主要涉及到的是ECharts如何利用GeoJSON数据来展示全球...
echarts文档离线
10-10
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，以及强大的交互功能和自定义选项，广泛应用于Web应用的数据展示。"echarts文档离线"指的是将...
获取echarts地图所有JSON文件
最新发布
05-27
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，适用于各种Web数据可视化场景。在ECharts中，地图图表是其特色功能之一，能够展示地理信息数据，如省份、城市等的分布情况。...
echarts 全国地图json数据
08-25
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，能够满足各种数据可视化需求。在这个“echarts全国地图json数据”中，我们主要讨论的是...
echarts.js文件
07-20
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它以直观、生动的方式展示数据，广泛应用于网页数据图表的绘制。ECharts.js是ECharts的主要实现文件，包含了完整的功能和API，供开发者在Web项目中集成和...
echarts-中国地图json文件
10-13
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持在网页上动态渲染地理地图。在ECharts中，使用中国地图JSON文件可以实现对中国各地区...
ECharts图表库开发手册
"ECharts开发手册，提供ECharts的入门教程和详细文档，涵盖了各种图表类型和交互组件，适用于PC和移动设备，支持多种浏览器。" ECharts是一个强大的JavaScript图表库，设计用于创建商业级的数据可视化图表。它能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值