首页 > 编程知识 正文

echarts刷新图表数据(echarts 柱状图)

时间:2023-05-06 04:30:27 阅读:78577 作者:2092

随着B/S的普及,Web端需要与大部分浏览器兼容、直观、生动、交互、高度可定制的数据可视化地图开发库。 百度公司可能听到了很多节目单猴的声音,但它迅速开放,为echarts做出了贡献。 echarts是一个纯JavaScript图表库,可以绘制美丽的大气图形,如折线图、条形图、散点图、折线图、饼图、雷达图、地图、面板和漏斗。

虽然echarts既方便又漂亮,但在生成图表时,经常需要进行复杂的数据类型转换和复杂的配置项修改。 一家企业看不过去,将Vue2.0和echarts封装起来,形成了v-charts图表组件。

使用v-charts可以轻松生成常用图表。 这是因为数据格式设置简单,数据格式前后统一。

要获得

45.1 v-charts安装

v-charts的支持,请使用npm进行安装。

npm i v-charts echarts -S也可以在cdn中部署,其中style.min.css是可选的。

script src=' https://cdn.jsdelivr.net/NPM/vue/dist/vue.js '/script

script src=' https://cdn.jsdelivr.net/NPM/e charts/dist/e charts.min.js '/script

script src=' https://cdn.jsdelivr.net/NPM/v-charts/lib/index.min.js '/script

有关link rel=' style sheet ' href=' https://cdn.jsdelivr.net/NPM/v-charts/lib/style.min.CSS '的详细用法,请参阅官方网站333

45.2 数据分析

当然,要知道在templates/admin下创建的模板名称应该被称为sale_sum.html。

如果真的不知道,请仔细阅读admin.py中SaleSumAdmin类的代码。 如果知道,请复制templates/admin/change _ list.html中的代码并将其粘贴到sale_sum.html中。

进行乾坤大移动,改变形状改变阴影的代码如下。 仅仅引入三个js文件没有什么意义。 重要的是阅读理解newvue(…)中的代码。 因为那才是你想要的“财富”。

{ % extends ' admin/base _ site.html ' % }

{ % load i18n admin _ urlsstaticadmin _ list % }

{% block extrastyle %}

{{ block.super }}

link rel=' style sheet ' type=' text/CSS ' href=' { % static ' admin/CSS/change lists.CSS ' % }? _=20180905'/

{ # link rel=' style sheet ' type=' text/CSS ' href=' { % static ' admin/simple ui/la yui/CSS/la yui.CSS ' % }

{% if cl.formset %}

link rel=' style sheet ' type=' text/CSS ' href=' { % static ' admin/CSS/forms.CSS ' % } /

{% endif %}

{% if cl.formset or action_form %}

script type=' text/JavaScript ' src=' { % URL ' admin : js i18n ' % } '/script

script src=' https://cdn.jsdelivr.net/NPM/e charts/dist/e charts.min.js '/script

script src=' https://cdn.jsdelivr.net/NPM/v-charts/lib/index.min.js '/script

{% endif %}

{{ media.css }}

{ % if not actions _ on _ topandnotactions _ on _ bottom % }

斯泰尔斯

# changelisttabletheadth :第一个- child {

width :以太网

}

/样式

{% endif %}

{% endblock %

} {% block extrahead %} {{ block.super }} {{ media.js }} {% endblock %} {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %} {% if not is_popup %} {% block breadcrumbs %} <div class="breadcrumbs"> <a rel="external nofollow" href="{% url 'admin:index' %}">{% trans 'Home' %}</a> › <a rel="external nofollow" href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a> › {{ cl.opts.verbose_name_plural|capfirst }} </div> {% endblock %} {% endif %} {% block coltype %}flex{% endblock %} {% block content_title %} {% endblock %} {% block content %} <style> #content { position: relative; } .object-tools { position: absolute; top: 16px; right: 20px; height: 50px; z-index: 2; } .object-tools .import_link, .object-tools .export_link { color: white !important; } </style> {% block object-tools %} <ul class="object-tools"> {% block object-tools-items %} {% if has_add_permission %} {{ block.super }} {% endif %} {% endblock %} </ul> {% endblock %} <div id="content-main"> {% if cl.formset.errors %} <p class="errornote"> {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %} {% trans "Please correct the errors below." %}{% endif %} </p> {{ cl.formset.non_form_errors }} {% endif %} <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist"> {% block search %}{% search_form cl %}{% endblock %} {% block date_hierarchy %}{% date_hierarchy cl %}{% endblock %} <div id="app" style="margin-top: 10px;margin-left: 5px"> <ve-histogram :data="chartData" :mark-point="markPoint" :extend="chartExtend" :colors="colors"> </ve-histogram> </div> </div> </div> <script> new Vue({ el: '#app', data: function () { this.chartExtend = { title: { text: '{{ bar_title }}售业绩统计报表', subtext: '{{ subtext }}', }, } this.markPoint = { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } return { colors: ['#c23531','#2f4554'], chartData: { columns: ['日期', '销售目标(万元)', '实际销售额(万元)'], rows: [ {% if task %} { '日期': '1月', '销售目标(万元)': {{ task.Jan_task }} ,'实际销售额(万元)': {{ task.Jan_sale }}}, { '日期': '2月', '销售目标(万元)': {{ task.Feb_task }} ,'实际销售额(万元)': {{ task.Feb_sale }}}, { '日期': '3月', '销售目标(万元)': {{ task.Mar_task }} ,'实际销售额(万元)': {{ task.Mar_sale }}}, { '日期': '4月', '销售目标(万元)': {{ task.Apr_task }} ,'实际销售额(万元)': {{ task.Apr_sale }}}, { '日期': '5月', '销售目标(万元)': {{ task.May_task }} ,'实际销售额(万元)': {{ task.May_sale }}}, { '日期': '6月', '销售目标(万元)': {{ task.Jun_task }} ,'实际销售额(万元)': {{ task.Jun_sale }}}, { '日期': '7月', '销售目标(万元)': {{ task.Jul_task }} ,'实际销售额(万元)': {{ task.Jul_sale }}}, { '日期': '8月', '销售目标(万元)': {{ task.Aug_task }} ,'实际销售额(万元)': {{ task.Aug_sale }}}, { '日期': '9月', '销售目标(万元)': {{ task.Sep_task }} ,'实际销售额(万元)': {{ task.Sep_sale }}}, { '日期': '10月', '销售目标(万元)': {{ task.Oct_task }} ,'实际销售额(万元)': {{ task.Oct_sale }}}, { '日期': '11月', '销售目标(万元)': {{ task.Nov_task }} ,'实际销售额(万元)': {{ task.Nov_sale }}}, { '日期': '12月', '销售目标(万元)': {{ task.Dec_task }} ,'实际销售额(万元)': {{ task.Dec_sale }}}, {% endif %} ] }, dataEmpty: true } } }) </script> <script type="text/javascript"> $(".object-tools").hide().find('li a').each(function () { _action.exts.push({ name:$(this).text(), url:$(this).attr('href') }) }) </script> {% endblock %}

万万没想到,在ModelAdmin里,竟然可以自定义过滤器,可以覆盖模板,还可以调整查询方法。更让人惊喜的,连模板里的代码都是通过拷贝完成的。

不试不知道,一试吓一跳,本以为不可能实现的功能,原来都是可以做得到的。所以说编程还是要多尝试,多动手。

好了,关于销售管理系统用Django实现的内容,总算开发完成了,下一步就说一下关于系统上线的内容。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。