提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue中使用echarts画饼状图

Vueecharts 使用 状图
2023-09-11 14:19:39 时间

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: {}
    },

 

相关文章