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: {} },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于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最大的设计失误
· 单元测试从入门到精通