vue+echarts,vue-echarts文档

　　最近项目中需要对数据进行可视化，众所周知echarts是一个非常强大的插件。下面文章主要介绍Vue使用echarts的完整步骤以及解决各种错误的相关信息。有需要的朋友可以参考一下。

　　前言：

　　Echarts，它是一个和框架无关的JS图表库，但是它是基于Js的，所以很多框架都可以用，比如Vue。估计也可以用离子的。下次，研究一下。

　　因为我的习惯，每次尝试做一个新的功能，我总会新建一个小项目，做Demo。

　　首先，看看你的电脑上是否安装了Vue，打开终端命令：vue - version。以前安装过Vue，不知道为什么报错：

　　vue/cli错误：找不到模块“@vue/cli-shared-utils”

　　注意：如果是全局module出错，就全局更新，如果是项目中module出错，就删除（rimraf node_modules）重新安装 (npm i)

　　解决方法（更新或者重装）：

　　国家预防机制更新-g @vue/cli

　　#或者

　　yarn全球升级-最新@vue/cli

　　Cmd在您自己的特定项目文件夹中打开终端。

　　1.vue创建电子海图

　　2.创建默认习惯，选择package.json然后输入N或y，过程很简单。

　　e图表到此文件夹，npm run serve显示项目运行正常：

　　正式开始尝试Echarts

　　建议你学会看官网文件：https://echarts.apache.org/handbook/zh/get-started/

　　可以学到两件事：

　　在画图之前，我们需要为ECharts准备一个定义了高度和宽度的DOM容器。通过echarts.init方法初始化一个echarts实例，通过setOption方法生成一个简单的直方图。基于这两句话的研究：我一般会尽量用About写Demo。

　　Ctrl键结束项目。

　　安装ECharts: NPM安装ECharts-保存在项目终端。

　　请注意，2022年后安装的echarts都是5.X版本，可以在package.json中看到，不知为何，这个和Vue项目不匹配，导致发生错误，知道原因的麻烦在下面留言。

　　全球引入：在main.js中全球引入echarts

　　从“echarts”导入e charts；

　　vue . prototype . $ e charts=e charts；

　　在模板/模板中用About写div id=main style=width: 600px。Vue高度：400px/div，如上图，对应1。在画图之前，我们需要为ECharts准备一个定义了高度和宽度的DOM容器。

　　div id= main style= width:600 px；高度：400像素/格

　　2.通过echarts.init方法初始化一个echarts实例，通过setOption方法生成一个简单的直方图。这个需要在脚本中操作。

　　示例1:

　　drawChart() {

　　//根据准备好的dom初始化echarts实例。这与上面的主要内容相对应

　　让我的图表=这个。$ e charts . init(document . getelementbyid( main )；

　　//指定图表的配置项和数据。

　　let option={

　　标题：{

　　文本：“电子海图简介示例”，

　　},

　　工具提示：{}，

　　图例：{

　　数据：[销售]，

　　},

　　xAxis: {

　　数据：[衬衫，毛衣，雪纺衫，裤子，高跟鞋，袜子]，

　　},

　　yAxis: {}，

　　系列：[

　　{

　　名称：销售量，

　　类型：“条形”，

　　数据：[5，20，36，10，10，20]，

　　},

　　],

　　};

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

　　myChart.setOption(选项)；

　　},

　　然后创建一个新的monted(){}，否则会出现init未定义等错误。

　　已安装(){

　　this . draw chart()；

　　},

　　至此，其实例1已经完成，但是我们发现图片无法显示，只有一个警告错误： e charts 中找不到 export default (导入为 e charts )

　　对百度存疑，https://blog.csdn.net/Aom_yt/article/details/110947734,给出的理由是“可能还不能支持最新版的echarts5.0”不一定对。知道原因的请在下面评论。

　　解决方法：

　　卸载：npm卸载echarts重装e Charts: NPM安装e Charts @ 4.9.0重新运行项目，发现成功。

　　示例2:

　　我的需求和目标是让https://echarts.apache.org/examples/zh/editor.html? C=bar-race-country version=5 . 2 . 1导入到我的Vue项目中。基于上述原则1和2，代码被加载：

　　div id= main 2 style= width:1600 px；高度：1400像素/格

　　drawChart2() {

　　//根据准备好的dom初始化echarts实例。这对应于上面的main2

　　让我的图表=这个图表。init(文档。getelementbyid(“main 2”)；

　　//指定图表的配置项和数据

　　定义变量根路径=

　　https://cdn。jsdelivr。net/GH/Apache/echarts-website @ ASF-site/examples ；

　　//var图表DOM=document。getelementbyid( main )；

　　//var myChart=echarts。init(图表DOM)；

　　定义变量期权；

　　常数更新频率=2000;

　　const dimension=0；

　　const countryColors={

　　澳大利亚： #00008b ，

　　加拿大： #f00 ，

　　中国： #ffde00 ，

　　古巴： #002a8f ，

　　芬兰： #003580 ,

　　法国：" #ed2939 "，

　　德国： #000 ,

　　冰岛： #003897 ,

　　印度： #f93 ，

　　日本： #bc002d ，

　　朝鲜： #024fa2 ，

　　韩国: #000 ,

　　新西兰： #00247d ，

　　挪威： #ef2b2d ，

　　波兰： #dc143c ，

　　俄罗斯： #d52b1e ，

　　土耳其： #e30a17 ，

　　英国： #00247d ，

　　美国： #b22234 ，

　　};

　　$.什么时候（

　　$.获取JSON( https://cdn。jsdelivr。net/NPM/莫吉-flags @ 1。3 .0/数据。JSON’)，

　　$.get JSON(ROOT _ PATH /data/asset/data/life-expectation-table。JSON’)

　　).完成(函数(res0，res1) {

　　const flags=res0[0]；

　　const data=res1[0]；

　　const years=[]；

　　对于(设I=0；我数据长度；i) {

　　如果(年。长度===0 年[年。length-1]！==data[i][4]) {

　　几年。push(data[I][4])；

　　}

　　}

　　函数getFlag(countryName) {

　　如果(!国家名称){

　　返回"";

　　}

　　返回（

　　flags.find(函数（项目){

　　return item.name===countryName

　　}) {}

　　).表情符号；

　　}

　　设startIndex=10

　　设开始年=年[startIndex]；

　　选项={

　　网格：{

　　top: 10，

　　底部：30,

　　左：150,

　　右：80,

　　},

　　xAxis: {

　　最大值："数据最大值",

　　axisLabel: {

　　格式化程序：函数(n) {

　　返回数学。round(n)" "；

　　},

　　},

　　},

　　数据集：{

　　来源：data.slice(1).过滤器（功能(d) {

　　return d[4]===起始年份；

　　}),

　　},

　　亚西斯：{

　　类型："类别",

　　逆：真，

　　最大值：10,

　　axisLabel: {

　　秀：真的，

　　fontSize: 14，

　　格式化程序：函数（值){

　　返回值" { flag get flag(value) } "；

　　},

　　丰富：{

　　标志：{

　　fontSize: 25，

　　填充：5,

　　},

　　},

　　},

　　动画时长：300,

　　animationDurationUpdate: 300，

　　},

　　系列：[

　　{

　　实时排序：没错，

　　seriesLayoutBy:"列",

　　类型："条形",

　　项目样式：{

　　颜色：函数（参数){

　　返回国家颜色[param。值[3]] # 5470 C6 ；

　　},

　　},

　　编码：{

　　x:维度，

　　y: 3，

　　},

　　标签:{

　　秀：真的，

　　精度：1,

　　位置："右侧",

　　数值动画：真的，

　　fontFamily:等宽，

　　},

　　},

　　],

　　//禁用初始化动画。

　　动画持续时间：0,

　　动画持续更新：更新频率，

　　动画制作："线性",

　　 animationEasingUpdate:线性，

　　图形：{

　　元素：[

　　{

　　类型："文本",

　　右：160,

　　底部：60,

　　风格：{

　　正文：开始年份，

　　字体：加粗80px等宽，

　　填充： rgba(100，100，100，0.25)，

　　},

　　z: 100，

　　},

　　],

　　},

　　};

　　//console.log(选项)；

　　myChart.setOption(选项)；

　　for(设i=startIndexI years . length-1；i) {

　　(职能(一){

　　setTimeout(function () {

　　update year(years[i1])；

　　}、(I-startIndex)* update frequency)；

　　})(一)；

　　}

　　函数更新年份(年){

　　设source=data.slice(1)。过滤器(功能(d) {

　　return d[4]===年；

　　});

　　选项.系列[0]。数据=来源；

　　option . graphic . elements[0]. style . text=year；

　　myChart.setOption(选项)；

　　}

　　});

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

　　myChart.setOption(选项)；

　　},

　　已安装(){

　　this . draw chart 2()；

　　},

　　不一一解释了。只要理解例1，这个也可以运行，同时可以举一反三。

　　其他：

　　我在学习Echarts的时候，发现它被很多人广泛使用，并且扩展了很多包，比如

　　封装D3，简化了代码。https://github.com/Finedl/Vue-echart-D3

　　示例：

　　HighCharts，样式比echarts多，等等。请参考：https://www.highcharts.com/blog/download/如何使用它。

　　总结

　　关于Vue使用echarts的这篇文章就说到这里。有关Vue使用echarts的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

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