vue如何使用ECharts实现折线图和饼图

这篇文章给大家分享的是有关vue如何使用ECharts实现折线图和饼图的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

在开发后台管理项目时，需要统计后台用户数据，以折线图和饼图的形式显示，这边采用apache-echarts来实现需求。

1.安装echarts和引入

npm install echarts --save import * as echarts from 'echarts';

2.使用echarts实现pie图

3.使用echarts实现line图

4.echarts基础概念

1）echarts实例

一个网页中可以创建多个 echarts 实例，每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。

2）系列（series）

一组数值以及他们映射成的图，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）

3）组件（component）

echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...

5.echarts常用配置项和API

1）title标题组件，包含主标题和副标题

title: {    text: 'Pie Chart',//主标题文本    subtext: '纯属虚构',//副标题文本    x: 'center',    textStyle:{//主标题样式      color: "#333",                                fontSize: 18    },    subtextStyle:{},//副标题样式    itemGap: 10,//主副标题之间的间距  }

2）legend图例组件

legend: {    left:"center",//图例组件离容器左侧的距离    top:"bottom",//图例组件离容器上侧的距离    orient:"horizontal",//图例列表的布局朝向    itemGap :20,//图例每项之间的间隔    formatter: function (name) {//用来格式化图例文本，支持字符串模板和回调函数两种形式~~~~        return 'Legend ' + name;    },    icon:'circle',//图例项的 icon    data: [        {            icon: 'triangle',            textStyle: {              color: 'red'            },            name: '直接访问'         },        '邮件营销', '联盟广告', '视频广告', '搜索引擎'],//图例的数据数组  }

3）xAxis直角坐标系 grid 中的 x 轴

xAxis : [        {            type : 'category',//坐标轴类型            boundaryGap : false,            axisTick: {//坐标轴刻度相关设置                show: false            },            data : ['周一','周二','周三','周四','周五','周六','周日']//类目数据        }    ]

4）yAxis直角坐标系 grid 中的 y 轴

yAxis : [        {            type : 'value',//坐标轴类型,`'value'` 数值轴，适用于连续数据            axisTick: {                show: false            },            name: '（人）'        }    ]

5）tooltip提示框组件

tooltip : {    trigger: 'axis',//触发类型,'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用    formatter: "{a} 
{b} : {c} ({d}%)",//模板变量有 `{a}`, `{b}`，`{c}`，`{d}`，`{e}`，分别表示系列名，数据名，数据值等}

6）series系列列表，每个系列通过 type 决定自己的图表类型

A.series-line series : [    {        name:'邮件营销',        type:'line',        stack: '总量',        data:[120, 132, 101, 134, 90, 230, 210],//系列中的数据内容数组        areaStyle:{//区域填充样式            color:'red'        },        lineStyle:{//线条样式            color:'#000'        },        emphasis:{//图形的高亮样式            label:{                color:'red'            }        }    }] B.series-pieseries : [    {      name: '访问来源',      type: 'pie',      radius: ['50%', '70%'],//饼图的半径,数组的第一项是内半径，第二项是外半径      center: ['50%', '50%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度      roseType: false,//是否展示成南丁格尔图，通过半径区分数据大小      data: [//系列中的数据内容数组        {value: 335, name: '直接访问'},        {value: 310, name: '邮件营销'},        {value: 234, name: '联盟广告'},        {value: 135, name: '视频广告'},        {value: 1548, name: '搜索引擎'}      ],      animationEasing: 'cubicInOut',//初始动画的缓动效果      animationDuration: 2600,//初始动画的时长      label: {                   emphasis: mylabel//高亮的扇区和标签样式      }    }]

感谢各位的阅读！关于"vue如何使用ECharts实现折线图和饼图"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！