折线图柱形图饼图三图自由切换

已于 2023-04-12 10:40:47 修改
阅读量1k 收藏 2
点赞数 1
文章标签： echarts javascript ecmascript
于 2023-04-07 17:12:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68393821/article/details/130016715
版权

效果：

vue2写法：

<template>
  <div class="perstatimg">
    <div v-show="pieshow" id="myChartpie" class="myChartpie" :style="{ width: '100%', height: '500px' }" />
    <div v-show="barshow" id="myChart" class="myChart" :style="{ width: '100%', height: '500px' }" />
  </div>
</template>

<script>
export default {
  data() {
    return {
    	barshow: true,
      pieshow: true
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    // 绘制当前用户图表
    drawLine() {
      const newTitle = '水果数量'
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      const myChartpie = this.$echarts.init(document.getElementById('myChartpie'))
      // 绘制图表
      myChart.setOption({
        // title: { text: "当前用户的点击量", subtext: "纯属虚构" },
        title: { text: newTitle },
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['点击量']
        },
        toolbox: {
          show: true,
          feature: {
            myTool: {
              show: true,
              title: '切换为饼图',
              icon: 'image://data:image/png;base64,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',
              iconStyle: {
                color: 'rgba(232, 17, 17, 1)'
              },
              onclick: function() {
                const myChartline = document.getElementById('myChart')
                const myChartpie2 = document.getElementById('myChartpie')
                myChartline.style.display = 'none'
                myChartpie2.style.display = 'block'
              }
            },
            magicType: { type: ['bar', 'line'] },
            // restore: {},
            saveAsImage: {}
            // dataView: {
            //   readOnly: false
            // },
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [],
          axisLabel: {
            interval: 0,
            rotate: 20,
            fontSize: 12,
            color: 'rgba(0, 0, 0, 1)'
          }
        },
        grid: {
          bottom: '100px'
        },
        dataZoom: [{
          realtime: true, // 拖动滚动条时是否动态的更新图表数据
          height: 25, // 滚动条高度
          start: 0, // 滚动条开始位置（共100等份）
          end: 50 // 结束位置（共100等份）
        }, {
          start: 0
        }],
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '访问量',
            type: 'bar',
            data: [],
            itemStyle: {
              color: '#99CCFF'
            }
          }
        ]
      })
      myChartpie.setOption({
        title: { text: newTitle },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: { // 图例文字的样式
            color: '#0b2b5e',
            fontSize: 32
          },
          data: ['点击量']
        },
        toolbox: {
          show: true,
          feature: {
            myTool: {
              show: true,
              title: '切换为柱状图',
              icon: 'image://data:image/png;base64,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',
              iconStyle: {
                color: 'rgba(232, 17, 17, 0)'
              },
              onclick: function() {
                const myChartline = document.getElementById('myChart')
                const myChartpie2 = document.getElementById('myChartpie')
                myChartline.style.display = 'block'
                myChartpie2.style.display = 'none'
              }
            },
            // restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: '访问量',
            type: 'pie',
            id: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            label: {
              formatter: '{b}: {@2012} ({d}%)',
              textStyle: {
                fontSize: 16
              }
            },
            data: [],
            itemStyle: {
              emphasis: {
                hadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                color: function(params) {
                  // 自定义颜色
                  var colorList = [
                    '#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2', '#024b51',
                    '#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2', '#024b51'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      )
      // 静态数据时
      myChart.setOption(
        (this.option = {
          xAxis: {
            data: ['苹果', '梨', '桃子', '橘子', '橙子', '芒果', '香蕉', '草莓', '榴莲', '西瓜']
          },
          series: [
            {
              data: ['39', '34', '29', '16', '40', '20', '20', '10', '10', '10']
            }
          ]
        })
      )
      myChartpie.setOption(
        (this.option = {
          series: [
            {
              data: [
                { value: '39', name: '苹果' },
                { value: '34', name: '梨' },
                { value: '29', name: '桃子' },
                { value: '16', name: '橘子' },
                { value: '40', name: '橙子' },
                { value: '20', name: '芒果' },
                { value: '20', name: '香蕉' },
                { value: '10', name: '草莓' },
                { value: '10', name: '榴莲' },
                { value: '10', name: '西瓜' }]
            }
          ]
        })
      )
      // 请求数据时
      // this.$axios.post("axiosurl", {"startDate": "", "endDate": ""}).then((res) => {
      //   this.resData = res.data;
      //   let PersonalAppName = new Array()
      //   let PersonalCount = new Array()
      //   let NewPersonalAppName = ""
      //   let NewPersonalCount = ""
      //   let NewPersonal = new Array();
      //   for (let i = 0; i < this.resData.length; i++) {
      //     PersonalAppName[i] = this.resData[i].name;
      //     NewPersonalAppName = this.resData[i].name;
      //     PersonalCount[i] = this.resData[i].count;
      //     NewPersonalCount = this.resData[i].count;
      //     NewPersonal[i] = {value: NewPersonalCount, name: NewPersonalname}
      //   }
      //   for (let i = 0; i < this.resData.length; i++) {
      //      PersonalAppName[i] = this.resData[i].name
      //      PersonalCount[i] = this.resData[i].count
      //   }
      //   if (PersonalAppName.length <= 0 || PersonalCount.length <= 0){
      //     // this.$message("暂无数据！！！");
      //     this.haveData = false;
      //     this.noData = true;
      //     return;
      //   } else {
      //     this.haveData = true;
      //     this.noData = false;
      //   }
      //   myChart.setOption(
      //     (this.option = {
      //       xAxis: {
      //         data: PersonalAppName,
      //       },
      //       series: [
      //         {
      //           data: PersonalCount,
      //         }
      //       ]
      //     })
      //   );
      //   myChartpie.setOption(
      //     (this.option = {
      //       series: [
      //         {
      //           data: NewPersonal
      //         }
      //       ]
      //     })
      //   );
      // })
    }
  }
}
</script>
<style>
.perstatimg{
  margin-top:20px;
  height: 500px;
  overflow: hidden;
}
</style>

react写法：

​
import React ,{Component} from "react";
import * as echarts from 'echarts';
export default class EchartsColumnar extends Component {
    constructor(props){
        super(props); 
        this.state={}
    }
  //方法的地方
  componentDidMount() {
  // const newTitle = '案件统计'
  // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('myChart');
    var chartDomPie = document.getElementById('myChartpie');
    var myChart = echarts.init(chartDom);   
    var myChartpie = echarts.init(chartDomPie);   
  // 绘制图表
  myChart.setOption({
    // title: { text: newTitle },
    tooltip: { trigger: 'axis' },
    legend: {
      data: ['点击量']
    },
    toolbox: {
      show: true,
      feature: {
        myTool: {
          show: true,
          title: '切换为饼图',
          icon: 'image://data:image/png;base64,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',
          iconStyle: {
            color: 'rgba(232, 17, 17, 1)'
          },
          onclick: function() {
            const myChartline = document.getElementById('myChart')
            const myChartpie2 = document.getElementById('myChartpie')
            myChartline.style.display = 'none'
            myChartpie2.style.display = 'block'
          }
        },
        magicType: { type: ['bar', 'line'] }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: this.props.data.content.stdata,
      axisLabel: {
        interval: 0,
        rotate: 20,
        fontSize: 12,
        color: 'rgba(0, 0, 0, 1)'
      }
    },
    grid: {
      bottom: '100px'
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '访问量',
        type: 'bar',
        data: this.props.data.content.data,
        itemStyle: {
          color: '#99CCFF'
        }
      }
    ]
  })
  myChartpie.setOption({
    // title: { text: newTitle },
    toolbox: {
      show: true,
      feature: {
        myTool: {
          show: true,
          title: '切换为柱状图',
          icon: 'image://data:image/png;base64,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',
          iconStyle: {
            color: 'rgba(232, 17, 17, 0)'
          },
          onclick: function() {
            const myChartline = document.getElementById('myChart')
            const myChartpie2 = document.getElementById('myChartpie')
            myChartline.style.display = 'block'
            myChartpie2.style.display = 'none'
          },
        }
      }
    },
    series: [
      {
        type: 'pie',
        id: 'pie',
        radius: '40%',
        center: ['50%', '40%'],
        label: {
          formatter: '{b}: {@2012} ({d}%)',
          textStyle: {
            fontSize: 10
          }
        },
        data: this.props.data.content.data,
        itemStyle: {
          emphasis: {
            hadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          normal: {
            color: function(params) {
              // 自定义颜色
              var colorList = [
                '#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2', '#024b51',
                '#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2', '#024b51'
              ]
              return colorList[params.dataIndex]
            }
          }
        }
      }
    ]
  }
  )
  }


render(){

    return(
       <div>
        <div style={{paddingLeft:"20px",paddingTop:"10px"}}>您好，查询到有<span  className="total"> {this.props.data.content.total} </span>个案件信息。</div>
       <div id="myChart" className="myChart" style={{width : "450px" , height: "300px"}} />
       <div id="myChartpie" className="myChartpie"  style={{width : "450px" , height: "300px",display:"none"}}/>
     </div>
    )
}
}

爱蹦哒的咸鱼
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+Echarts实现一个折线图
祈澈菇凉
05-09 9686
在jQuery里面，实现一个折线图，【前端统计图】echarts实现单条折线图 https://www.jianshu.com/p/0354a4f8c563。 现在要实现,Vue+Echarts实现一个折线图,打开之前的mint项目: 1:在项目里面安装echarts cnpm install echarts --s 2：在需要用图表的地方...
ECharts入门
qq_45835940的博客
01-03 3179
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
echarts 饼图、柱状图、折线图 切换
qq_28586135的博客
06-20 5333
echarts 饼图、柱状图、折线图切换
Echarts 动态实现柱状图、折线图、饼状图的切换
最新发布
wqwq093030的博客
03-06 1267
【代码】Echarts 动态实现柱状图、折线图、饼状图的切换。
echarts饼图与折线图联动点击饼图，折线图随其改变给饼图的图例设置格式化
qq_55949207的博客
09-06 1157
<template> <div class="Mymodule"> <div class="midWrap" id="lines" style="width: 536px; height: 256px"></div> </div> </template> <script> let echarts = require('echarts/lib/echarts'); // 引入折线图和饼图组件 require.
[echarts] 饼图折线图柱状图相互转换
qq_14993591的博客
01-28 531
【代码】[echarts] 饼图折线图柱状图相互转换。
java实现各种数据统计图（柱形图，饼图，折线图）
12-21
本主题将深入探讨如何使用JFreeChart库来创建柱形图、饼图和折线图。JFreeChart是一个强大的、开源的Java类库，它允许开发者在Java应用程序或Web应用中轻松地生成高质量的图表。 首先，我们来了解JFreeChart的基本...
用MFC实现折线图，柱形图，饼图
12-04
在本文中，我们将深入探讨如何使用Microsoft Foundation Class (MFC) 框架来实现折线图、柱形图和饼图。MFC是微软为Windows应用程序开发提供的一套C++类库，它极大地简化了图形用户界面的构建。 首先，我们需要理解...
itext报表类库 柱形图，饼图，折线图
03-31
在报表生成领域，iText 提供了丰富的功能，包括创建柱形图、饼图和折线图，使得开发者可以轻松地在PDF文档中嵌入各类图表，增强报告的可视化效果。 在使用iText进行报表制作时，柱形图、饼图和折线图是数据可视化的...
使用java实现各种数据统计图（柱形图，饼图，折线图）
09-03
JFreeChart是一个强大的Java库，它可以用来创建多种类型的图表，包括柱形图、饼图和折线图。本篇文章将详细介绍如何使用JFreeChart来实现这些统计图形。 首先，为了使用JFreeChart库，我们需要导入以下三个依赖库：...
echarts饼图自动切换代码
08-28
整个项目自己写的网页，做项目的时候写的，里面包含地图及地区各个区域间的传输，折线图，饼图的自动切换，柱状图及信息的轮播
Echarts饼状图和折线图
06-18
实现Echarts饼状图标签文本在图的下方，折线图坐村系左对齐无间隙，解决手机上空中太多空间。
echarts图表切换功能（不改变数据，只切换图形）
min的博客
05-26 8989
方法一：echarts自带（该方法能进行折线图和柱状图的切换，因为这两种图表渲染的数据格式是一致的） // 在options中加入以下配置即可 toolbox: { show: true, feature: { magicType: {type: ['line', 'bar']}//此处最新版本echarts可设置三个值（stack-堆叠模式） } } 方法二：自己进行数据处理，并重新渲染echarts（自己实操，想法
echarts柱状图饼状图切换
weixin_46029283的博客
06-26 1308
echarts柱状图饼状图切换。
echarts各种图示例及转换方法
TwoBE9876的博客
03-11 1868
// 折线图数据示例 lineOption: { tooltip: { trigger: 'axis', extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)' }, calculable: true, xAxis: { type: 'category', data: ['培训课件', '课程', '晒课资.
前端：echarts实现柱状图的多图表切换
weixin_44899642的博客
07-07 3329
（1）首先界面界面如图所示：此时默认的信息为总体车间的数据 数据中的信息 分别为麻阳 凤凰 吉首 怀化数据信息 （2）点击信号机 会出现与之对应的数据 其余类似 重点：1. 代码中总体车间为用户第一个所看到的 2.点击信号机，轨道，道岔 要进行数据的准确的传递 以数组的形式的将各个车站数据分开 HTML代码： 需要引入对应的插件 否则会报错 css代码块： 如有错误 请及时留言...
echarts 柱状图&&折线图切换展示
weixin_40030173的博客
11-17 1966
【代码】echarts 柱状图&&折线图切换展示。
Echarts切换页签报表（饼图、柱图）代码
HaleyTiger的博客
01-07 984
O、预览图 实现图例切换效果的重点： （1）图例设置单选： selectedMode: 'single' （2）图例中 data: ['组织','课程','培训','专家']的每个元素需与option.series数组中的每一个name属性值相对应即可切换。 （3）option.series数组中的每一个name属性值设置为空串''（即不能匹配），故这样的数据（series）即公共系列，每个页签...
Echarts 自定义工具栏事件 || 柱状图和饼状图之间的切换
小雨
11-27 5490
echarts中有柱状图和折线图之间的切换,却没有柱状图和饼图直接的切换 不过echarts有自定义工具栏方法,我们可以通过自定工具栏的方法来实现echarts没有的图形切换 toolbox 中的 feature 自定方法 (title: 鼠标放上去显示的文字;icon: 自定工具栏的图标的path路径;onclick: 点击事件) 在点击事件写自己要处理成的图形代码就行了, 下面有我的一个完整实例 如何引入echarts,在我的上一篇文章中, 完整代码: <template> &lt.
5.启动Spyder，在Spyder环境下编写程序:利用[2,3,5,10,8]列表数据绘制折线图柱形图、饼图，如附图 11-3 所示。
06-11
好的，以下是Python代码实现： ```python import matplotlib.pyplot as plt # 数据 data = [2, 3, 5, 10, 8] # 折线图 plt.figure() plt.plot(data) plt.title("Line Chart") plt.xlabel("X") plt.ylabel("Y") plt.show() # 柱形图 plt.figure() plt.bar(range(len(data)), data) plt.title("Bar Chart") plt.xlabel("X") plt.ylabel("Y") plt.show() # 饼图 plt.figure() plt.pie(data) plt.title("Pie Chart") plt.legend(["Item1", "Item2", "Item3", "Item4", "Item5"]) plt.show() ``` 运行后，会分别弹出折线图、柱形图和饼图的窗口，如下图所示： ![line chart](https://img-blog.csdnimg.cn/20210730092921404.png) ![bar chart](https://img-blog.csdnimg.cn/20210730093007136.png) ![pie chart](https://img-blog.csdnimg.cn/20210730093030851.png) 希望这个例子能够帮助你理解如何在Spyder环境下绘制折线图、柱形图和饼图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值