简单应用ECharts绘制可视化图表

1.在ECharts官网,网址是:http://echarts.baidu.com/index.html,下载Echarts3.5.4的源码和示例文件。

2.解压缩下载下来的Echars压缩包,找到doc\example\www\js目录,将里面的js文件全部取出来,在web项目的WebRoot下新建JS目录,将之前的文件复制进去。

3.为ECharts准备一个具备大小的Dom。

 <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>

4.在页面的顶端引入模块加载器echarts.js。

<!-- ECharts单文件引入 -->
    <script src="./js/echarts.js"></script>

5.为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径。

<script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: './js/js'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],

6.动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径

 function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };

                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );

7.效果图

8.注意事项
  在实际项目中,ECharts图标的横坐标和纵坐标,均是在后台返回的数据中的得到的。在前端动态设置data数值时,data的类型必须是数组,EChars才能展现出图标的效果来。
9.附完整代码:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: './js/js'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };

                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
<think> 我们需要使用ECharts库来绘制图表。首先,要使用Echarts,我们需要安装pyecharts库(一个用于生成Echarts图表的Python库)或者使用Echarts的JavaScript版本。这里我们使用pyecharts,因为问题要求用Python代码。 安装方法(如果需要的话): pip install pyecharts 注意:pyecharts有多个版本,这里我们以v1版本为例(目前常用的是v1,但请注意版本兼容性)。 绘制图表的基本结构: 1. 导入相应的图表类 2. 创建图表对象 3. 添加数据和配置项 4. 生成HTML文件或直接在notebook中显示 配置项解析: ECharts的配置项非常丰富,主要包含: - title: 标题组件,包含主标题和副标题。 - legend: 图例组件,展示不同系列的标记、颜色和名称。 - tooltip: 提示框组件,在鼠标悬停时显示数据详情。 - toolbox: 工具箱,内置有导出图片、数据视图、动态类型切换等工具。 - grid: 直角坐标系内绘图网格,可以控制图表的位置和大小。 - xAxis: 直角坐标系中的x轴。 - yAxis: 直角坐标系中的y轴。 - series: 系列列表,每个系列通过type决定图表类型(如折线图、柱状图等)。 下面以一个简单的柱状图为例,说明代码结构和配置项的使用。 示例:绘制一个简单的柱状图 </think> ### 使用 ECharts 绘制可视化图表的结构代码及配置项解析 以下是使用 Python 的 `pyecharts` 库绘制 ECharts 图表的完整结构代码及核心配置项解析: ```python from pyecharts.charts import Bar from pyecharts import options as opts # 1. 创建图表对象 bar = Bar() # 2. 添加数据系列 bar.add_xaxis(["苹果", "香蕉", "橙子", "西瓜", "葡萄"]) # X轴数据 bar.add_yaxis("商家A", [120, 200, 150, 80, 70]) # Y轴数据系列1 bar.add_yaxis("商家B", [85, 140, 190, 110, 130]) # Y轴数据系列2 # 3. 全局配置项(核心配置) bar.set_global_opts( title_opts=opts.TitleOpts(title="水果销量对比", subtitle="2023年度数据"), toolbox_opts=opts.ToolboxOpts(is_show=True), # 显示工具箱 tooltip_opts=opts.TooltipOpts(trigger="axis"), # 提示框配置 legend_opts=opts.LegendOpts(pos_left="center"), # 图例位置 xaxis_opts=opts.AxisOpts(name="水果种类"), # X轴标签 yaxis_opts=opts.AxisOpts(name="销量(箱)"), # Y轴标签 ) # 4. 系列配置项(针对特定数据系列) bar.set_series_opts( label_opts=opts.LabelOpts(is_show=True), # 显示数据标签 markpoint_opts=opts.MarkPointOpts( data=[ opts.MarkPointItem(type_="max", name="最大值"), opts.MarkPointItem(type_="min", name="最小值") ] ) ) # 5. 渲染图表(可选输出方式) bar.render("bar_chart.html") # 生成HTML文件 # bar.render_notebook() # 在Jupyter中直接显示 ``` --- ### 核心配置项解析 #### 1. **图表类型选择** - 导入对应图表类:`Bar`(柱状图)、`Line`(折线图)、`Pie`(饼图)等 - 示例:`from pyecharts.charts import Bar` #### 2. **数据系列配置** - `add_xaxis()`:设置X轴数据(类别型数据) - `add_yaxis(series_name, data)`: - `series_name`:数据系列名称(显示在图例中) - `data`:数值数据列表 - 可多次调用添加多个数据系列 #### 3. **全局配置项(set_global_opts)** | 配置项 | 作用 | 常用参数示例 | |--------------------|-------------------------------|---------------------------------------| | `title_opts` | 标题配置 | `title="主标题", subtitle="副标题"` | | `tooltip_opts` | 提示框配置 | `trigger="axis"`(坐标轴触发) | | `legend_opts` | 图例配置 | `pos_left="center"`(居中显示) | | `xaxis_opts` | X轴配置 | `name="时间"`(轴名称) | | `yaxis_opts` | Y轴配置 | `type_="value"`(数值轴) | | `toolbox_opts` | 工具箱 | `is_show=True`(显示导出图片等工具) | | `datazoom_opts` | 区域缩放 | `type_="inside"`(内置型缩放) | #### 4. **系列配置项(set_series_opts)** | 配置项 | 作用 | 常用参数示例 | |--------------------|-------------------------------|---------------------------------------| | `label_opts` | 数据标签 | `is_show=True`(显示数值标签) | | `markpoint_opts` | 标记点 | `type_="max"`(标记最大值点) | | `markline_opts` | 标记线 | `type_="average"`(平均值线) | | `linestyle_opts` | 线条样式(折线图) | `width=2, type_="dashed"` | | `itemstyle_opts` | 图元样式 | `color="#c23531"`(自定义颜色) | #### 5. **图表渲染** - `render(filename)`:生成HTML文件 - `render_notebook()`:在Jupyter中直接显示 - `render("snapshot.html")`:结合`snapshot_selenium`可输出图片 --- ### 定制化技巧 1. **主题切换**: ```python from pyecharts.globals import ThemeType bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.DARK)) ``` 2. **数据格式转换**: ```python # 处理时间序列数据 from pyecharts.commons.utils import JsCode xaxis_opts=opts.AxisOpts( axislabel_opts=opts.LabelOpts(formatter=JsCode("(value) => value.split('-')[1] + '月'")) ) ``` 3. **组合图表**: ```python from pyecharts.charts import Bar, Line bar = Bar() line = Line() bar.overlap(line) # 柱状图+折线图组合 ``` --- ### 常见问题解决 1. **中文显示异常**: ```python # 设置全局字体 bar.set_global_opts( title_opts=opts.TitleOpts(title="标题"), legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(font_family="SimHei")) ) ``` 2. **大数据量优化**: ```python set_global_opts(datazoom_opts=[opts.DataZoomOpts(type_="inside")]) set_series_opts(large_threshold=2000) # 启用大数据优化模式 ``` 3. **异步数据加载**: ```python # 结合Flask/Django使用 @app.route("/chart") def get_chart(): c = make_chart() return c.dump_options_with_quotes() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值