vue echarts 饼图,vue echart折线图

　　这篇文章主要为大家详细介绍了某视频剪辑软件使用展示实现折线图和饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

1.安装echarts和引入

　　新公共管理安装电子图表-保存

　　从“电子海图”导入*作为电子海图；

2.使用echarts实现pie图

　　模板

　　div id=图表饼图 class=饼图包装/div

　　/模板

　　脚本

　　从“电子海图”导入*作为电子海图；

　　要求( e图表/主题/马卡龙);//引入主题

　　导出默认值{

　　data() {

　　返回{

　　图表：空

　　}

　　},

　　已安装(){

　　这个. nextTick(()={

　　这个。drawpiechart()；

　　})

　　},

　　方法：{

　　drawPieChart() {

　　let mytextStyle={

　　颜色： #333 ,

　　fontSize: 18，

　　};

　　让我的标签={

　　秀：真的，

　　位置："右侧",

　　偏移量：[30,40],

　　格式化程序：" {b} : {c} ({d}%)"，

　　textStyle: mytextStyle

　　};

　　这个。图表饼图=电子图表。init(文档。getelementbyid(图表饼图)，马卡龙);

　　this.chartPie.setOption({

　　标题：{

　　文本："饼图",

　　潜台词： 纯属虚构，

　　x:"中心"

　　},

　　工具提示：{

　　触发器："项目",

　　格式化程序：" {a} br/{b} : {c} ({d}%)"，

　　},

　　图例：{

　　数据：[直接访问, 邮件营销, 联盟广告, 视频广告, 搜索引擎],

　　左："中间",

　　顶部："底部",

　　方向："水平",

　　},

　　系列：[

　　{

　　名称： 访问来源，

　　类型："饼图",

　　半径：[50% , 70%],

　　中心：[50% , 50%],

　　数据：[

　　{值：335,名称： 直接访问},

　　{值：310,名称： 邮件营销},

　　{值：234,名称： 联盟广告},

　　{值：135,名称： 视频广告},

　　{值：1548,名称： 搜索引擎}

　　],

　　动画制作："立方体输出",

　　动画时长：2600,

　　标签:{

　　重点：mylabel

　　}

　　}

　　]

　　});

　　}

　　}

　　}

　　/脚本

　　style lang=less 范围。馅饼包装

　　宽度：100%;

　　高度：400像素

　　}

　　/风格

3.使用echarts实现line图

　　模板

　　！-为展示准备一个具备大小（宽高)的多姆

　　div id=图表线 class=换行/div

　　/模板

　　脚本

　　从“电子海图”导入*作为电子海图；

　　要求( e图/主题/闪耀)；//引入主题

　　导出默认值{

　　data() {

　　返回{

　　图表线：空

　　}

　　},

　　已安装(){

　　这个. nextTick(()={

　　这个。drawlinechart()；

　　})

　　},

　　方法：{

　　drawLineChart() {

　　这个。chartline=echarts。初始化(这.$el， shine )；//基于准备好的多姆，初始化展示实例

　　let option={

　　工具提示：{

　　触发器："轴"

　　},

　　图例：{

　　数据：[邮件营销,联盟广告,视频广告,直接访问,搜索引擎]

　　},

　　可计算的：真，

　　xAxis : [

　　{

　　类型："类别",

　　边界差距：假，

　　轴棒：{

　　显示：假

　　},

　　数据：[周一,周二,周三,周四,周五,周六,周日]

　　}

　　],

　　亚西斯：[

　　{

　　类型：“值”，

　　轴棒：{

　　显示：假

　　},

　　姓名：“(人)”

　　}

　　],

　　系列：[

　　{

　　名称：“邮件营销”，

　　类型：“行”，

　　堆栈：“总金额”，

　　数据：[120，132，101，134，90，230，210]

　　},

　　{

　　名称：联盟广告，

　　类型：“行”，

　　堆栈：“总金额”，

　　数据：[220，182，191，234，290，330，310]

　　},

　　{

　　名称：视频广告，

　　类型：“行”，

　　堆栈：“总金额”，

　　数据：[150，232，201，154，190，330，410]

　　},

　　{

　　名称：直接访问，

　　类型：“行”，

　　堆栈：“总金额”，

　　数据：[320，332，301，334，390，330，320]

　　},

　　{

　　名称：“搜索引擎”，

　　类型：“行”，

　　堆栈：“总金额”，

　　数据：[820，932，901，934，1290，1330，1320]

　　}

　　]

　　};

　　//使用刚才指定的配置项和数据显示图表。

　　this.chartLine.setOption(选项)；

　　}

　　}

　　}

　　/脚本

　　style lang=less 范围。换行{

　　宽度：50%；

　　高度：400px

　　}

　　/风格

4.echarts基础概念

　　1）echarts实例

　　您可以在一个网页中创建多个echarts实例，每个echarts实例可以创建多个图表和坐标系(由选项描述)。准备一个DOM节点(作为echarts的渲染容器)，可以在上面创建一个echarts实例。

　　2）系列（series）

　　一组值和它们映射的图形。series.type至少包含一组值、图表类型和关于这些数据如何映射到图表的其他参数。

　　echarts中的Series.type是图表类型。系列(series.type)的类型至少有：折线图、条形图和饼图

　　3）组件（component）

　　echarts中至少有这几个组件：xAxis(直角坐标系X轴)，yAxis(直角坐标系Y轴)，grid(直角坐标系底板)，dataZoom(数据区缩放组件)，visualMap(可视化映射组件)，tooltip(提示框组件)，toolbox(工具栏组件)，series(系列)，

5.echarts常用配置项和API

　　1)标题标题组件，包括主标题和副标题。

　　标题：{

　　文本：“饼图”，//主标题文本

　　正文：“纯属虚构”，//字幕正文

　　x:中心，

　　TextStyle:{//主标题样式

　　颜色： #333 ，

　　字体大小：18

　　},

　　文本样式：{}，//字幕样式

　　ItemGap: 10，//主字幕之间的间距

　　}

　　2)图例图例组件

　　图例：{

　　Left:center ，//图例组件距容器左侧的距离

　　Top:bottom ，//图例组件距容器上侧的距离

　　Orient:horizontal ，//图例列表的布局方向

　　ItemGap :20，//图例中各项之间的间隔

　　Formatter: function (name) {//用于格式化图例文本，支持两种形式~ ~ ~ ~

　　返回“图例”名称；

　　},

　　图标：“圆形”，//图例项的图标

　　数据：[

　　{

　　图标：“三角形”，

　　textStyle: {

　　颜色：红色

　　},

　　名称：“直接访问”

　　},

　　“邮件营销”、“附属广告”、“视频广告”、“搜索引擎”]、//legend的数据数组

　　}

　　3) X轴直角坐标系网格中的X轴

　　xAxis : [

　　{

　　类型：“类别”，//轴类型

　　boundaryGap:假，

　　AxisTick: {//与坐标轴刻度相关的设置

　　显示：假

　　},

　　数据：[周一，周二，周三，周四，周五，周六，周日]//类别数据

　　}

　　]

　　4)雅西直角坐标系网格中的雅西

　　亚西斯：[

　　{

　　Type:数值，//轴类型，数值数值轴，适用于连续数据

　　轴棒：{

　　显示：假

　　},

　　姓名：“(人)”

　　}

　　]

　　5)工具提示提示框组件

　　工具提示：{

　　触发器：轴，//触发器类型，轴轴触发器，主要用于使用分类轴的条形图、折线图等图表。

　　格式化程序：“{a} br/{b}: {c} ({d}%)”，//模板变量为`{a} `、`{b} `、`{c} `、`{d} `、`{ e } `，分别代表序列名和数据名。

　　}

　　6)系列系列列表，每个系列按类型决定自己的图表类型。

　　a .系列线

　　系列：[

　　{

　　名称：“邮件营销”，

　　类型：“行”，

　　堆栈：“总金额”，

　　Data: [120，132，101，134，90，230，210]，//序列中数据内容的数组

　　AreaStyle:{//区域填充样式

　　颜色：红色

　　},

　　Line: {//lineStyle:{//

　　颜色： #000

　　},

　　强调：{//图形的突出显示样式

　　标签:{

　　颜色：红色

　　}

　　}

　　}

　　]

　　b系列-馅饼

　　系列：[

　　{

　　名称：“访问源”，

　　类型：“饼图”，

　　半径：[50% ， 70%]，//饼图的半径，数组第一项是内半径，第二项是外半径。

　　Center: [50% ， 50%]，//饼图的中心(中心)坐标。数组的第一项是横坐标，第二项是纵坐标。支持设置为百分比。当设置为百分比时，第一项相对于容器的宽度，第二项相对于容器的高度。

　　RoseType: false，//是否显示为南丁格尔图，数据大小以半径区分。

　　Data: [//序列中数据内容的数组

　　{value: 335，name:直接访问 }，

　　{value: 310，name:邮件营销 }，

　　{value: 234，name:联盟广告 }，

　　{value: 135，name:视频广告 }，

　　{value: 1548，name:“搜索引擎”}

　　],

　　动画缓动：“cubic inout”，//初始动画的缓动效果

　　AnimationDuration: 2600，//初始动画的持续时间

　　标签:{

　　重点：mylabel//突出显示的扇区和标签样式

　　}

　　}

　　]

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。