单柱图/单条形图

chartData: {axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],seriesData: [120, 200, 150, 80, 70, 110, 130]
}

单柱图+标线

chartData: {axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],seriesData: [120, 200, 150, 80, 70, 110, 130],// 标线数据markData: [{ address: '省', value: 125 },{ address: '市', value: 100 },{ address: '县', value: 80 }]
}

多柱图/多条形图

chartData: {axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],seriesData: [{name: '指标1',dataList: [120, 130, 234, 245, 2444, 123]},{name: '指标2',dataList: [120, 130, 234, 245, 2444, 123]},{name: '指标3',dataList: [120, 130, 234, 245, 2444, 123]},{name: '指标4',dataList: [120, 130, 234, 245, 2444, 123]}]
}

堆叠柱状图/堆砌柱状图

注意：x轴上数据为正，x轴下数据为负

chartData: {axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],seriesData: [{name: '指标1',dataList: [120, 130, 234, 245, 2444, 123]},{name: '指标2',dataList: [120, 130, 234, 245, 2444, 123]},{name: '指标3',dataList: [120, 130, 234, 245, 2444, 123]},{name: '指标4',dataList: [120, 130, 234, 245, 2444, 123]}]
}

折线图（单线图）

chartData: {axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],seriesData: [120, 200, 150, 80, 70, 110, 130]
}

多折线图

chartData: {axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],seriesData: [{name: '指标1',dataList: [123, 131, 224, 123, 567, 342]},{name: '指标2',dataList: [234, 145, 234, 245, 232, 123]},{name: '指标3',dataList: [12, 231, 234, 245, 244, 123]},{name: '指标4',dataList: [43, 456, 234, 245, 250, 123]}]
}

单柱+单折

注意：需要明确那部分数据是柱状图展示所需数据，哪些数据是折线图的数据

chartData: {axisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']seriesLineData: {name: '指标1',value: [120, 130, 234, 245, 2444, 123]},seriesBarData: {name: '指标2',value: [150, 230, 224, 218, 135, 147]}
}

单柱+单折显示上升下降趋势

var up = 'image://data:image/png;base64,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'
var down = 'image://data:image/png;base64,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'
var same = 'image://data:image/png;base64,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'var chartData = {axisData: ['第一季度', '第二季度', '第三季度', '第四季度'],seriesBarData: {name: '有形资产净增率',dataList: [242.97, 234.31, 239.065, 236.27]},seriesLineData: {name: '有形资产净增率',dataList: [2.83, -3.56, 0.65, -2.49]}
}
option = {xAxis: {type: 'category',data: chartData.axisData},yAxis: {type: 'value',},tooltip: {formatter: (params) => {console.log(params)return '数值：' + chartData.seriesBarData.dataList[params.dataIndex] + '\n增幅：' + chartData.seriesLineData.dataList[params.dataIndex]}},series: [{name: '',type: 'pictorialBar',symbol: function (data, params) {if (chartData.seriesLineData.dataList[params.dataIndex] > 0) {return up} else if (chartData.seriesLineData.dataList[params.dataIndex] < 0) {return down} else if (chartData.seriesLineData.dataList[params.dataIndex] == 0) {return same}},symbolSize: [20, 30],symbolOffset: [0, -40],symbolPosition: 'end',label: {show: true,position: 'top',formatter: function (params) {return chartData.seriesLineData.dataList[params.dataIndex] + '%'},fontSize: 18},data: chartData.seriesBarData.dataList},{type: 'bar',data: chartData.seriesBarData.dataList,barWidth: this.barWidth}]
};

单饼图/单环图

chartData: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }
]

双环图

chartData: [{name: '税额',seriesData: [{ value: 1048, name: '开发区分局' },{ value: 735, name: '金港分局' },{ value: 580, name: '塘桥分局' },{ value: 484, name: '保税区' },{ value: 300, name: '锦丰分局' },{ value: 580, name: '凤凰分局' },{ value: 484, name: '乐余分局' },{ value: 300, name: '大新分局' }]},{name: '人数',seriesData: [{ value: 40, name: '开发区分局' },{ value: 38, name: '金港分局' },{ value: 32, name: '塘桥分局' },{ value: 30, name: '保税区' },{ value: 28, name: '锦丰分局' },{ value: 26, name: '凤凰分局' },{ value: 22, name: '乐余分局' },{ value: 18, name: '大新分局' }]}
]

单柱变动图/单条变动图

传参1

var chartData = {timeLindata: ['2018', '2019', '2020', '2021'],seriesData: [{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6]}, // 2018{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [13,24,15,26]}, // 2019{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6]}, // 2020{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [33,24,35,56]} // 2021]
}
var optionVal = chartData.seriesData.map((item, index) => {return {title: {text: chartData.timeLindata[index] + '年'},xAxis: {data: item.xdata},series: {type: 'bar',data: item.ydata}}})
option = {baseOption: {timeline: {data: chartData.timeLindata,axisType: 'category',autoPlay: true,playInterval: 1500,},title: {text: '',right: '2%',bottom: '8%',textStyle: {fontSize: 50,color: '#000'}},xAxis: {type: 'category'},yAxis: {type: 'value'}},options: optionVal
}

传参2

var chartData = {timelineData: ['2016', '2017', '2018', '2019'],xData: ['批发零售', '制造业', '商务服务', '居民服务', '建筑业', '住宿餐饮', '科研'],yData: [[13.2, 1.11, 13.6, 9284, 64138, 2237, 4779], // 2016[15.26, 1.31, 16.68, 10331, 91580, 1909, 40469], // 2017[14.23, 1.31, 21.13, 10873, 94964, 2966, 129748], // 2018[15.68, 1.56, 34.55, 10289, 92345, 1099, 132011] // 2019]
}
var optionVal = chartData.yData.map((item, index) => {return {title: {text: chartData.timelineData[index] + '年'},xAxis: {data: chartData.xData},series: {type: 'bar',data: item}}
})
option = {baseOption: {timeline: {data: chartData.timelineData,axisType: 'category',autoPlay: true,playInterval: 1500,},title: {text: '',right: '2%',bottom: '8%',textStyle: {fontSize: 50,color: '#000'}},tooltip: {trigger: 'axis'},xAxis: {type: 'category'},yAxis: {type: 'value'}},options: optionVal
}

单柱变动图显示上升下降趋势

var up='image://data:image/png;base64,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'
var down = 'image://data:image/png;base64,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'
var same = 'image://data:image/png;base64,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'var chartData = {timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改seriesData: [{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6],status: [up, up, down, down]}, // 2018{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [13,24,15,26],status: [down, up, up, down]}, // 2019{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6],status: [up, down, up, down]}, // 2020{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [33,24,35,56],status: [up, down, down, up]} // 2021]
}
var optionVal = chartData.seriesData.map((item, index) => {return {// title: {//   text: this.chartData.timelineData[index] + '年'// },xAxis: {data: item.xdata},tooltip: {},series: [{name: "",type: 'pictorialBar',symbol: function(data,params){return item.status[params.dataIndex]},symbolSize: [20, 30],symbolOffset: [0, -40],color:'orange',symbolPosition: 'end',label: {show: true,position: "top",formatter:  function(params){return item.ydata[params.dataIndex]},fontSize: 30,fontWeight: 'bold',color: '#34DCFF'},data: item.ydata},{type: 'bar',data: item.ydata,barWidth: 60}]}
})
option = {baseOption: {timeline: {data: chartData.timelineData,axisType: 'category',autoPlay: true,playInterval: 1500,},title: {text: '',right: '2%',bottom: '8%',textStyle: {fontSize: 50,color: '#000'}},xAxis: {type: 'category'},yAxis: {type: 'value'}},options: optionVal
}

单饼图变动图

var json = {// 变量名修改timelineData: ['2018', '2019', '2020', '2021'],seriesData: [{name: '2018',value: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},{name: '2019',value: [{ value: 10, name: 'Search Engine' },{ value: 20, name: 'Direct' },{ value: 30, name: 'Email' },{ value: 40, name: 'Union Ads' },{ value: 50, name: 'Video Ads' }]},{name: '2020',value: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},{name: '2021',value: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
}

单折线变动图

json = {timelineData: ['2018', '2019', '2020', '2021'] // 变量名修改data: [{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6]}, // 2018{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6]}, // 2019{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6]}, // 2020{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [3,4,5,6]} // 2021]
}

多柱变动图/多条变动图

// 数据类型
var chartData = {timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改seriesData: [{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [3,4,5,6]},{name: '指标2',dataList: [3,4,5,6]},]}, // 2018{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [33,24,35,56]},{name: '指标2',dataList: [3,4,5,6]},]}, // 2019{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [33,24,35,56]},{name: '指标2',dataList: [3,4,5,6]},]}, // 2020{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [33,24,35,56]},{name: '指标2',dataList: [3,4,5,6]},]} // 2021]
}var optionVal = chartData.seriesData.map((item, index) => {return {xAxis: item.xdata,series: item.ydata.map((item1, index1) => {return {name: item1.name,type: 'bar',data: item1.dataList}})}
})
option = {baseOption: {timeline: {data: chartData.timelineData,axisType: 'category',autoPlay: true,playInterval: 1500,},title: {text: '',right: '2%',bottom: '8%',textStyle: {fontSize: 50,color: '#000'}},xAxis: {type: 'category'},yAxis: {type: 'value'}},options: optionVal
}

多折线变动图

// 数据类型
var chartData = {timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改seriesData: [{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [3,4,5,6]},{name: '指标2',dataList: [3,4,5,6]},]}, // 2018{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [33,24,35,56]},{name: '指标2',dataList: [3,4,5,6]},]}, // 2019{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [33,24,35,56]},{name: '指标2',dataList: [3,4,5,6]},]}, // 2020{xdata: ['批发零售', '制造业', '商务服务', '居民服务'],ydata: [{name: '指标1',dataList: [33,24,35,56]},{name: '指标2',dataList: [3,4,5,6]},]} // 2021]
}var optionVal = chartData.seriesData.map((item, index) => {return {xAxis: item.xdata,series: item.ydata.map((item1, index1) => {return {name: item1.name,type: 'line',data: item1.dataList}})}
})
option = {baseOption: {timeline: {data: chartData.timeLindata,axisType: 'category',autoPlay: true,playInterval: 1500,},title: {text: '',right: '2%',bottom: '8%',textStyle: {fontSize: 50,color: '#000'}},xAxis: {type: 'category'},yAxis: {type: 'value'}},options: optionVal
}

双环变动图

var json = {timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改seriesData: [{name: '2018',value: [{name: '指标1',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},{name: '指标2',data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]},{name: '2019',value: [{name: '指标1',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},{name: '指标2',data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]},{name: '2020',value: [{name: '指标1',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},{name: '指标2',data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]},{name: '2021',value: [{name: '指标1',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},{name: '指标2',data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]}]
}

echarts图表格式记录相关推荐

  1. vue+docxtemplater实现读取word文档，根据后端数据生成echarts图表插入word，并下载为docx格式文件

    一.需求 word自带的图表不能满足需求,并且编写过程繁琐,需要写一个页面,主要功能是能读取服务器的word模板,根据后台给的数据,自动生成echarts图表并插入到word指定位置,然后点击能下载插 ...

  2. vue实现echarts图表下载（含多张图表），导出图片格式

    使用插件: html2canvas npm安装: npm install html2canvas 组件引入: import html2canvas from "html2canvas&quo ...

  3. 【生成PDF】Java如何根据前台Echarts图表生成PDF，并下载

    文章目录 前言 一.如何通过java代码生成PDF? 1.依赖 二.如何在PDF中画前台的echarts图? 1.如何拿到前台echarts图的信息? 前台代码: 后台逻辑:生成PDF,并下载 PDF ...

  4. 【帆软FR】Echarts图表方案

    目录 一.导图 二.准备工作 三.通用方法介绍 1.方案1-Label标签 2.方案2-报表块 3.方案3-网页框 4.方案4-Echarts插件 四.Echarts联动方案 五.附件 一.导图 二. ...

  5. echarts 图表导出到 Word

    本篇文章主要记录了使用 poi-tl Java类库实现前端 echarts 图表导出到 Word 的详细步骤. 版本:Word:2019,poi-tl:1.10.5 ,poi:4.1.2 poi-tl ...

  6. springboot 使用ftl模板导出echarts图表到word

    最近有个需求是导出一个报表页面,包括页面的echarts图表以及一些分析说明,导出的文件是word文件.记录下做法 1.先定义好一个word静态模板 模板中的动态数据用一个变量来替代,图片部分随便用一 ...

  7. ECharts 图表插件使用整理（图表配置实现）

    ECharts 图表插件使用整理 说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts ...

  8. vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染

    vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染 前言 一.按需引入 ECharts 图表和组件 二.使用步骤 1.还是先上代码叭 2. 上实现效果 ! ...

  9. 动态更改echarts 高度_EasyShu地图可视化新突破，ECharts图表完美集成

    EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...

  10. 在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...

    问题描述: echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录: 解决方 ...

最新文章

  1. neo4j删除所有节点
  2. SAP中关于物料主数据里物料类型的修改
  3. CVE-2017-7921复现（解密文件）
  4. snmp协议_软件评测师写作专栏之OSI七层模型及其常见的协议11
  5. 提高篇 第一部分 基础算法 第4章 广搜的优化技巧
  6. 安装fail2ban
  7. rx590 黑苹果 无货_RX 590显卡在Mojave黑苹果系统中识别为RX 480问题的解决一例。...
  8. 如何通俗地理解假设检验基本原理
  9. 《阿里云的这群疯子》
  10. iptv增值服务_什么是IPTV，以及如何启动您自己的IPTV服务？
  11. 第8章.商品详情页面之thymeleaf
  12. Java 获取当前年 、当前月
  13. day1 计算机基础以及python基础
  14. 【MySQL】java编程器宣传费湖南岚鸿驱动
  15. goframe与gin对比(一) 综述
  16. 与朱元思书（南朝 梁 吴均）
  17. 麒麟V10双网卡绑定测试
  18. secureCRT安装失败,path注册失败,绿色汉化版
  19. matlab lzc,人脸分割 matlab程序
  20. 胜利vs50线跟vs100线区别_千兆网线和百兆网线有什么区别？千兆和百兆水晶头做法一样吗？...

热门文章

  1. 软件测试女生可以学习么？现在还能入行么？
  2. 招行权证割肉比赛开演 10个交易日后寿终正寝
  3. 《技术人创业攻略》-用技术改变世界！
  4. bug_ warning: control reaches end of non-void function
  5. 消息传输协议-MQTT篇-QoS
  6. 淘宝内乱持续 QQ盛大京东“趁火打劫”
  7. “collect2: error: ld returned 1 exit status“解决方法
  8. html网页漂浮广告原理js,JS实现弹性漂浮效果的广告代码
  9. MapBox使用之路线规划
  10. noip 2013 积木游戏