【Echarts 绘制柱状图、折线图和扇形图】

1. 柱状图和折线图

柱状图和折线图的基本内容完全一致，只需要将option中的series的type: ‘bar’ 修改type: ‘line’，就可以将柱状图转化为折线图。

initEchart(data) {  //data为传入的数据，格式为[{},{},...,{}]let that = thisif (this.chart) {this.chart.dispose();}this.chart = echarts.init(document.getElementById('OperationChars'));//选择想要创建图表在哪个根节点if (data.length > 0) { //数据存在的时候对数据进行处理let arr1 = []; let arr2 = []; //arr1存放横坐标，arr2存放纵坐标的数据for (let i = 0; i < data.length; i++) {arr1.push(data[i].AREA);let obj = {}obj.count = data[i].EDID;obj.INDUSTRYCATEGORY = data[i].AREA;arr2.push(obj);}let option = { //对柱状图或折线图的设置backgroundColor: '#fff', //图表整体的背景颜色borderWidth: 1, //柱状图的每个柱子的宽度borderColor: '#fff',tooltip: {trigger: 'axis', //触发坐标轴axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'，选择line的时候鼠标悬浮时是一条线，shadow悬浮时是一个宽的柱体}},xAxis: [  //对横坐标进行设置{type: 'category', data: arr1,  //横坐标的数据axisLine: {lineStyle: { //横坐标坐标轴的颜色和宽度设置color: '#CED3DA', width: 2}},}],yAxis: [ //纵坐标设置{type: 'value',name: '次数',  splitLine: { show: true },  //是否去除网格线，true为显示，false为去除 axisLine: {lineStyle: {  // 横坐标坐标轴的颜色、宽度和纵坐标上的字体大小设置color: '#CED3DA',width: 2,fontSize: 14,}},}],legend: {  //标记柱状图每个颜色的代表含义data: ['企业数量'],      //图例名称 right: 50,                              //调整图例位置top: 20,                                  //调整图例位置itemHeight: 10,                      //修改icon图形大小icon: 'rect',      //图例前面的图标形状，长方形为rect，圆形用circletextStyle: {                            //图例文字的样式color: '#CED3DA',               //图例文字颜色fontSize: 14                      //图例文字大小}},series: [{type: 'bar',  // 编写折线统计图时将其修改为linename: '企业数量',showAllsymbol: true,// barWidth: '5px',itemStyle: {normal: {color: '#333'}},data: arr2.map(i => i.count)  //通过循环获取到想要展示的数据}]}this.chart.setOption(option,true);}}

2. 扇形图

initEchart(data) {let { startTime, endTime, arrNum } = this.statelet that = thisif (this.chart) {this.chart.dispose();}let colorList = ["#green","#red","#pink","#gray","#yellow","#blue"]this.chart = echarts.init(document.getElementById('OperationChars'));if (data.length > 0) {let arr3 = []; let arr4 = [];for (let i = 0; i < data.length; i++) {arr3.push(data[i].name);let obj = {}obj.id= data[i].id;obj.name = data[i].name;arr4.push(obj);}let option = {backgroundColor: '#fff',tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c}次'},legend: {orient: 'vertical',right: 10,top: '30%',bottom: 20,data: arr3,textStyle: {                            //图例文字的样式color: '#CED3DA',               //图例文字颜色fontSize: 12                      //图例文字大小},icon: 'circle'},color: colorList, // 自定义颜色series: [{// z: 1,name: '纳入企业名单的原因',type: 'pie',minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互radius: ['40%', '60%'],center: ['22%', '50%'],splitLine: {distance: -30,length: 10,lineStyle: {width: 2,color: '#CED3DA'}},label: {normal: {show: false,position: 'center',color: '#fff',formatter: '总数量\n' + this.state.arrNum1 + '家',textStyle: {                        //图例文字的样式color: '#CED3DA',               //图例文字颜色fontSize: 20                    //图例文字大小}},formatter: '{b|{b}}\n({c})\n', // 这里的设置就是饼图的标签内容及其格式rich: {b: {align: 'center'}}},data: arr4},]};this.chart.setOption(option)}
}

在以下代码完成后，如果你的图表没有显示在页面上，别着急，那是因为你还需要在render中创建一个id为OperationChars的div，并且这个节点需要设置高度，不设置高度的话显示出来的可能是一条线。
例如：

render(
<div><div id="OperationChars" style={{height:"500px"}}></div>
<div>
)

【Echarts 绘制柱状图、折线图和扇形图】相关推荐

小小数据统计（柱状图、折线图、扇形图）
代码地址如下: http://www.demodashi.com/demo/12012.html 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要 ...
graphics | 基础绘图系统（四）——柱状图、直方图、扇形图、箱形图和函数图象...
前面介绍的主函数plot()主要用于绘制散点图和折线图,绘制其他常见的图形如柱状图.直方图.扇形图和箱形图等可以调用专门的函数. 1 柱状图绘制基础柱状图的函数是barplot(),其语法结构如下: ...
Chart图表整合——面积对比图、扇形图、柱状图
一. chart图表demo网址网址:http://antv.alipay.com/zh-cn/f2/3.x/demo/index.html 二. 本文主要对面积对比图,扇形图,柱状图三大常见图进行 ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
多波束前视声呐的矩形图转扇形图
# -*- coding: utf-8 -*- """ Created on Fri Apr 1 16:18:44 2022 @author: WJJ "&qu ...
Echarts 双柱状图+折线图合并---实现效果详解(vue+Echarts实现)
此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo 示例展示; 如有疑问或者不清楚的欢迎随时提问 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验 ...
Qt绘制柱状图BarChart、饼状图PieChart、堆叠柱状图StackedChart、散点图ScatterChart
一.效果展示二.工程中添加charts模块三.在工程布局文件中放一块Graphics View,然后右键提升为QChartView,每个Tab都一样.如下图四.更改控件名,如下图所示五.Mai ...
android 第三方扇形图,Android扇形图（饼状图）
关于Android的图形控件,市场上是有很多的开源库的我个人用的比较多的就是:MPAndroidChart,个人感觉挺好用的,但是有写时候,满足不了需求,就需要自己去写了. 先看看我们的效果图: T ...
ios 扇形按钮_iOS 饼状图（扇形图）动画效果的实现
先上效果图: 23.gif Demo在此,休得撒野!!!! 1.怎么用 /** * Pie * * @param frame frame * @param dataItems 数据源,此Demo是红. ...

【Echarts 绘制柱状图、折线图和扇形图】

1. 柱状图和折线图

2. 扇形图

【Echarts 绘制柱状图、折线图和扇形图】相关推荐

最新文章

热门文章