工作113:添加echart折线图

<template><div><el-card><div slot="header" class="clearfix"><span>订单信息</span></div><!--样式控制全部 已经退回 待审核--><el-row><el-radio-group v-model="query.status" size="small"><el-radio-button label="全部" /><el-radio-button label="已退回" /><el-radio-button label="待审核" /><el-radio-button label="待接收" /><el-radio-button label="进行中" /><el-radio-button label="待结算" /><el-radio-button label="已完成" /></el-radio-group><!--样式控制全部 全部 昨日--><el-radio-groupv-model="query.timeSpan"size="small"style="float: right"><el-radio-button label="全部" /><el-radio-button label="昨日" /><el-radio-button label="近七日" /><el-radio-button label="近三十日" /></el-radio-group></el-row><!--引入custom组件--><custom-table@size-changes="list"@pagination-change="list":data="tableData":columns="columns":pagination="pagination"><template v-slot:action><el-table-columnfixed="right"header-align="center"label="操作"width="100"><template slot-scope="scope"><!--调用查看的函数--><!--                          <router-link :to="{}">--><!--                          </router-link>--><el-button type="text" @click="handleView(scope.row)">查看详情</el-button></template></el-table-column></template></custom-table></el-card><el-card><div id="main" :style="{ width: '300px', height: '300px' }"></div><div id="main1" :style="{ width: '300px', height: '300px' }"></div></el-card></div>
</template><script>
/*引入eachart*/
import echarts from "echarts";
import CustomTable from "@/component/table/CustomTable";
import { TableListMixin } from "@/component/table/TableMixin";
export default {name: "Infomation",mixins: [TableListMixin],components: {CustomTable},mounted() {let myChart = echarts.init(document.getElementById("main"));let myChart1 = echarts.init(document.getElementById("main1"));let option = {title: {text: "柱状图"},tooltip: {},legend: {data: ["销量"]},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20]}]};let option1 = {tooltip : {trigger: 'axis'},legend: {data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']},calculable : true,xAxis : [{type : 'category',boundaryGap : false,axisTick: {show: false},data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',axisTick: {show: false},name: '（人）'}],series : [{name:'邮件营销',type:'line',stack: '总量',data:[120, 132, 101, 134, 90, 230, 210]},{name:'联盟广告',type:'line',stack: '总量',data:[220, 182, 191, 234, 290, 330, 310]},{name:'视频广告',type:'line',stack: '总量',data:[150, 232, 201, 154, 190, 330, 410]},{name:'直接访问',type:'line',stack: '总量',data:[320, 332, 301, 334, 390, 330, 320]},{name:'搜索引擎',type:'line',stack: '总量',data:[820, 932, 901, 934, 1290, 1330, 1320]}]};myChart.setOption(option);myChart1.setOption(option1);},data() {return {/*表头*/columns: [/*任务名称id*/{ prop: "id", label: "ID", width: "100", sortable: true },/*订单名称 name*/{ prop: "name", label: "订单名称", sortable: true },/*创建人*/{ prop: "client", label: "客户名称", sortable: true },/*创建时间*/{ prop: "username", label: "创建人", sortable: true },/*业务单元*/{ prop: "created_at", label: "创建时间", sortable: true },/*投放账号*/{ prop: "business_module", label: "业务单元", sortable: true },/*发布时间*/{ prop: "put_department", label: "投放部门", sortable: true },/*任务状态*/{ prop: "status_name", label: "订单状态", sortable: true },/*任务状态*/{ prop: "spread_data", label: "传播数据(万)", sortable: true }],/*绑定的taskTableData里面的数据*/TableData: [],url: {list: "/home/information"}};},methods: {handleView(scope) {this.$router.push({ path: "/list/analysis/" + scope.id });}}
};
</script>

运行结果

工作113:添加echart折线图相关推荐

echart折线图连线不显示问题总结
echart折线图,series动态数据不能有空数据,不然,只有数据点,而连线出不来.
Echart折线图横坐标时间获取
Echarts 折线图的js option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', ' ...
echart折线图，柱状图，饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain ...
echart折线图小知识
1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 1 var selected = {}; 2 ...
echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy ...
echart折线图 -- 每条线分别对应不同x、y轴数据
代码示例 option = {legend: {data:['曲线1', '曲线2']},tooltip : {trigger: 'axis',axisPointer: {type: 'cross', ...
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
Qt工作笔记-绘制静态折线图
话不多说,程序运行截图如下: 程序结构图如下: 这里要注意一点: 要把QWidget提升为QChartView 并且在工程文件加上 Qt+=charts 代码如下: widget.h #ifndef ...
[vue+elementUI+echarts]echart折线图展示后台传来的数据
最近项目遇到了这个问题,来记录一下,方便以后复制粘贴23333 主要功能: 循环遍历渲染后台传来的一堆数据,然后点击每一条数据的More Info按钮展示对应的折线图表格数据. 引elementUi和 ...

工作113:添加echart折线图

工作113:添加echart折线图相关推荐

最新文章

热门文章