vue中使用echarts画饼状图

echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

新文档地址:https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

另一个库:http://antv-2018.alipay.com/zh-cn/g2/3.x/demo/other/word-cloud.html

新地址:

ECharts 正在 Apache 开源基金会孵化中,因此域名已不再使用,请访问  echarts.apache.org
ECharts is now under incubation at the Apache Software Foundation. So this domain name is no longer in use. Visit echarts.apache.org please

采用按需引入的方式

安装echarts包就不说了,上一篇有代码

今天来看看如何画饼状图

复制代码
<template>
  <div>
    <div class="pie">
        <div id="pie1">
            <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
        </div>
        <div id="pie2">
            <div id="main2" style="float:left;width:100%;height: 300px"></div>
        </div>
    </div>
  </div>
</template>

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  created(){
  },
  mounted(){
    this.initData();
  },
  methods:{
    //初始化数据
    initData() {
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption({
          title : {
              text: '某站点用户访问来源',//主标题
              subtext: '纯属虚构',//副标题
              x:'center',//x轴方向对齐方式
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom',
              data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'直接访问'},
                      {value:310, name:'邮件营销'},
                      {value:234, name:'联盟广告'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'搜索引擎'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
    },
  }
}
</script>
复制代码

效果图

 

具体设置请参考 官网

 改变折线图的颜色以及折点颜色

复制代码
series: [
                  {
                    name: 折线图名称, 
                    type: 'line', 
                    data: [...], 
                    smooth: true,
                    itemStyle : { normal : { lineStyle:{ color:'#324ED9'},color:'#324ED9'},}, 
                  },
                  {
                    name: 折线图名称, 
                    type: 'line', 
                    data: [...], 
                    smooth: true,
                    itemStyle : { normal : { lineStyle:{ color:'#2BB02D'},color:'#2BB02D'},}, 
                  }
]
复制代码

 

改变工具栏样式:

复制代码
// 右上角工具栏
     toolbox: {
                  emphasis:{
                    iconStyle:{
                      borderColor:"#486eff",//自定义鼠标悬浮工具栏图标的颜色
                    }
                  },
                  feature: {
                    magicType: {
                      type: ['line', 'bar'],
                      icon:{
                        line:"path://xxx",//自定义折现图标
                        bar:"path://xxx",//自定义柱状图图标
                      }
                    },
                    saveAsImage: {
                      show: true,
                      name:'OverviewPic',//导出图片名称
                      icon:"path://xxx",//自定义保存图标icon
                    },
                    myTool1: {//自定义工具栏
                      show: true, 
                      title: 自定义工具名称, 
                      icon: "path://xxxxx", 
                      onclick: function (){
                        //dosome...
                      }
                    },
                  },
                  tooltip: {}
    },
复制代码

 

posted @   古墩古墩  Views(22017)  Comments(0Edit  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示