最近工作中需要用到echarts，由于项目是用的脚手架开发的。在网上搜到某视频剪辑软件中合成了vue-echart，但是不想使用某视频剪辑软件中规定好的数据格式，于是就自己做了一个某视频剪辑软件项目引用原生展示的简单演示，实现过程如下：用了两种实现方式

准备工作

1、安装展示依赖

控制台输入：国家预防机制安装展示保存

2、全局引入

main.js中引入

从echarts ' Vue.prototype导入$ echarts=echarts创建图表

第一种创建方式

在一个。某视频剪辑软件文件中引入多张图表

创建WelcomePage.vue

模板div h1第一种在某视频剪辑软件中使用统计图的方式/h1 div class=' charts ' div id=' barGraph ' style=' height : 350 px；'/div/div class=' charts ' div id=' PieGraph ' style=' height : 350 px；'/div/div/div/模板脚本/引入基本模板，按需加载让echart=require(' echart/lib/echart ')；//引入柱状图必选(' echart/lib/chart/bar ')；//引入柱状图要求(' echart/lib/chart/pie ')；需要(“echart/lib/component/tooltip”)；要求(' echart/lib/component/title ')；导出默认{ name: 'WelcomePage '，data(){ return } }，mounted(){ this。拉杆();这个。draw pie()；}，methods:{拉杆(){ //基于多姆，初始化展示实例让条形图=echart。init(文档。getelementbyid('条形图')；//绘制图表条形图。设置选项({ title : { text : }全年产量趋势图，left: 'center' }，tooltip: { trigger: 'item '，formatter : " { a } br/{ b } : { c } ' }，legend: { left: 'center '，data: ['本年', '上年]，bottom:0 }，xAxis: { type: 'category '，name: 'x '，splitLine: {show: false}，data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月] }、grid: { left: '1% '、right: '2% '、bottom: '8% '、containLabel: true }、yAxis: { type: 'category '、name: 'y '、splitLine: {show: true}、data:['10% '、' 20% '、本年，类型： '行，data: [0.8，0.98，0.96，0.27，0.81，0.47，0.74，0.23，69，0.25，0.36，0.56] }，{ name: '上年，键入： 'line '，data: [1，0.2，0.4，0.8，0.16，0.32，0.64，1.28，5.6，0.25，0.63，0.65，0.12] }，] }) }，绘制饼图(){ let pieGraph=echart。init(文档。getelementbyid(' PieGraph ')；PieGraph。设置选项({ title : { text : }某站点用户访问来源，子文本： '纯属虚构，x: '中心' },工具提示： { trigger: 'item '，格式化程序： " { a } br/{ b } : { c }({ d } %)' }，legend: { orient: '垂直，左侧： '左侧，data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎] },系列： [ { name: '访问来源，类型： '饼图，半径： '55% ',中心： ['50% ',' 60%'],数据：[ {value:335，name: '直接访问}，{value:310，name: '邮件营销}，{value:234，name: '联盟广告}，{value:135，name: '视频广告}，{value:1548，name: '搜索引擎} ]，items tyle : {强调： { shadowblur : 10，shadowOffsetX: 0，shadowColor: 'rgba(0，0，0，0.5)' } } } } } }脚本实现效果如下图：

第二种实现方式（以组件的形式)

创建父组件神父

div h1{{ msg }}/h1 p第二种方式：通过组件的方式进行页面渲染/p div class='container '条形图/条形图/div div class='container '饼图/饼图/div /divscript/引入两个子组件从""导入条形图“/条形图”；从""导入皮耶图./pie graph '；导出默认{ name : }父亲，组件：{条形图，PieGraph，}，数据(){返回{ msg: '我是爸爸，想看我的儿子，眼睛请往下移，} } }/脚本创建子组件barGraph.vue

div p { { msg } }/p div class=' charts ' div : id=' id ' style=' min-height : 350 px；'/div /divscript让echart=require(' echart/lib/echart ')；//引入柱状图必选(' echart/lib/chart/bar ')；需要(“echart/lib/component/tooltip”)；要求(' echart/lib/component/title ')；//从“echart”导入统计图导出默认值{ name : }条形图，//道具s 3360[' id ']，//第一种接收父亲传过来的值的方式prop : { id : { type : String，default: 'chart' } }，data(){ return { msg: '我是第一个子组件-' bar '，chart: null，} }，mounted(){ this。拉杆();}，methods:{拉杆(){这个。图表=echart。init(文档。getelementbyid(这。id))；让colors=['#5793f3 '，' #d14a61 '，' # 675 BBA ']；这个。图表。setoption({ color : colors，tooltip : { trigger : ' axis })，axispos烧结： { type : ' cross ' }，grid: { right: '20%' }，工具箱： { feature : { dataview : { show 333: true，readOnly: false}，restore: { show:蒸发量','降水量','平均温度] }，xaxis :[{ type : ' category }，轴刻度： {与标签: true对齐}，数据33:[' 1 '月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月] } ]，yAxis: [ { type: 'value '，name: '蒸发量，min: 0，max: 250，position: 'right '，axis lene : { linestyle : { color : colors[0]} }， 轴标签: {格式化程序："{ value { ml }"}，{ type: 'value '，name: '降水量，min: 0，max: 250，position: 'right '，offset: 80，axis lene : { linestyle : { color : colors[1]}，axis label : { formatter : ' { value } ml ' }，{ type: 'value '，name: '温度，min: 0，max: 25，position: 'left '，axis lene : { linestyle : { color : colors[2]}，axis label : { formatter : ' { value } C ' } }]，series 3360[{ name : '蒸发量，键入：'bar '，data:[2.0，4.9，7.0，23.2，25.6，76.7，135.6，162.2，32.6，20.0，6.4，3.3] }，{ name : }降水量，type:'bar '，yAxisIndex: 1，data:[2.6，5.9，9.0，26.4，28.7，70.7，175.6，182.2，48.7，18.8，6.0，2.3] }，{ name: '平均温度，键入： '行'，yAxisIndex: 2，data:[2.0，2.2，3.3，4.5，6.3，10.2，20.3，23.4，23.0，16.5，12.0，6.2]}]} } } } } }脚本创建pieGraph.vue

模板div p { { msg } }/p div class=' charts ' div : id=' id ' style=' min-height : 350 px；'/div /div/templatescript从“eChart”导入统计图导出默认值{ name: ' piegraph，prop : { id : { type : String，default: 'pieChart' }，data(){ return{ msg: '我是第二个子组件- pie '，pieChart: null } }，mounted(){ this。画饼()；}，方法： { DrawPie(){ this。PieChart=echart。init(文档。GetElementBYid(这个。id))；这个。PieChart。设置选项({ title : { text : }某站点用户访问来源，子文本： '纯属虚构，x: '中心' },工具提示： { trigger: 'item '，格式化程序： " { a } br/{ b } : { c }({ d } %)' }，legend: { orient: '垂直，左侧： '左侧，data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎] },系列： [ { name: '访问来源，类型： '饼图，半径： '55% ',中心： ['50% ',' 60%'],数据：[ {value:335，name: '直接访问}，{value:310，name: '邮件营销}，{value:234，name: '联盟广告}，{value:135，name: '视频广告}，{value:1548，name: '搜索引擎} ]，items tyle : {强调： { shadowblur : 10，shadowOffsetX: 0，shadowColor: 'rgba(0，0，0，0.5)' } } } } } }脚本效果实现如下：

路由文件如下：

从@/组件/欢迎页面'导入父项从@/组件/父项'导入条形图从@/组件/条形图'导入饼图从@/组件/piegraph '导出默认新路由器({ routes :[{ path 3: '/'，名称： '欢迎页面'，组件： WelcomePage }，{ path: '/父项，名称3: '父项，组件3:父项，子项33366以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。