Django中使用pyechart的一些设置

Django中使用pyechart的一些设置

1.固定颜色、根据数据作多条线、线条样式

需要先自行选择颜色的RGB放入列表，在line.add_yaxis是设置 color=color_list[num] 即可

color_list = [      # 选定颜色
    "#FA8072", "#EEE8AA", "#FF00FF", "#7B68EE", "#1E90FF", "#FF1493", "#B0C4DE",
]

result_dict = {'aa':[1,2,3], 'bb':[4,5,6]}      # 测试数据

for key, value in result_dict.items():      # 对字典中的每一个键值对做一条线
        count = count + 1   # 每次循环确保颜色改变
        line.add_yaxis(
            series_name=key
            y_axis=value,
            linestyle_opts=opts.LineStyleOpts(width=1.5),   # 设置折线粗细
            label_opts=opts.LabelOpts(is_show=False),       # 设置折现上不显示标签
            is_symbol_show=False,       # 设置为平滑曲线
            color=color_list[count]     # 设置颜色
        )

2.图例更改（图形、间隙、对其、布局）

line.set_global_opts(
    legend_opts=opts.LegendOpts(
                item_gap=0,         # 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
                item_width=20,      # 图例中图形的长度
                item_height=10,     # 图例中图形的高度
                pos_left='70%',     # 图例组件离容器左侧的距离，可以是及具体像素值，也可以是百分比
                pos_top='15%',      # 图例组件离容器上侧的距离，可以是及具体像素值，也可以是百分比
                orient='horizontal',# 图例列表的布局朝向
                align='auto'        # 自动对齐
            ),
)

3.布局更改（使用Grid）

<div id="main" style="width:1000; height:300px;"></div>     # 实际测试是html中的长和宽起实际作用
line = Line(
        init_opts=opts.InitOpts(
            width='800px',      # 该处设置的长款对显示没有实际影响
            height='600px'
        )
    )
grid = Grid()
grid.add(line, grid_opts=opts.GridOpts(pos_left='4%', pos_right='30%')) # 设置距离容器距离

4.区域缩放（滚动条、滚轮缩放）

line.set_global_opts(
        datazoom_opts=[
            opts.DataZoomOpts(range_start=0, range_end=100),        # 设置底部缩放条
            opts.DataZoomOpts(type_="inside", range_start=0, range_end=100),    # 设置图内滚轮可缩放
        ],
    )

5.整合代码

index.html:

<div id="main" style="width:1000; height:300px;"></div>
<script>
var chart = echarts.init(document.getElementById('main'), 'white', {renderer: 'canvas'});
        $(
            function () {
                fetchData(chart);
            }
        );
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "line/",
                dataType: 'json',
                success: function (result) {
                    chart1.setOption(result.data);
                }
            });
        }
</script>

views.py：

color_list = [
    "#FA8072", "#EEE8AA", "#FF00FF", "#7B68EE", "#1E90FF", "#FF1493", "#B0C4DE",
]

result_dict = {'aa':[1,2,3], 'bb':[4,5,6]}

def line_base(request) -> str:
    line = Line(
        init_opts=opts.InitOpts(
            width='800px',
            height='600px'
        )
    )
    line.add_xaxis(['2002','2003','2004'])
    for key, value in result_dict.items():
        count = count + 1
        line.add_yaxis(
            series_name=key
            y_axis=value,
            linestyle_opts=opts.LineStyleOpts(width=1.5),
            label_opts=opts.LabelOpts(is_show=False),
            is_symbol_show=False,
            color=color_list[count]
        )
    line.set_global_opts(
        title_opts=opts.TitleOpts(title="Line Test"),
        tooltip_opts=opts.TooltipOpts(trigger="axis"),
        yaxis_opts=opts.AxisOpts(
            type_="value",
            axistick_opts=opts.AxisTickOpts(is_show=True),
            splitline_opts=opts.SplitLineOpts(is_show=True),
        ),
        xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),

        legend_opts=opts.LegendOpts(
            item_gap=0,
            item_width=20,
            item_height=10,
            pos_left='70%',
            pos_top='15%',
            orient='horizontal',
            align='auto'
        ),
        datazoom_opts=[
            opts.DataZoomOpts(range_start=0, range_end=100),
            opts.DataZoomOpts(type_="inside", range_start=0, range_end=100),
        ],
    )

    grid = Grid()
    grid.add(line, grid_opts=opts.GridOpts(pos_left='4%', pos_right='30%'))
    return grid.dump_options_with_quotes()

class ChartView_line(APIView):
    def get(self, request, *args, **kwargs):
        return JsonResponse(json.loads(line_base(request)))
        
class IndexView(APIView):
    def get(self, request, *args, **kwargs):
        return render(request, "index.html")

urls.py

urlpatterns = [
    path('index/', views.IndexView.as_view(), name='index'),
    path('index/line/', views.ChartView_line.as_view(), name='line'),
]