VUE项目中按需引入ECharts.js

安装ECharts包

npm install echarts --save

引入 ECharts

  在main.js中引入

 1 // 引入 ECharts 主模块
 2 let echarts = require(‘echarts/lib/echarts‘);
 3 // 引入折线图/柱状图等组件
 4 require(‘echarts/lib/chart/line‘)
 5 require(‘echarts/lib/chart/bar‘)
 6 require(‘echarts/lib/chart/radar‘)
 7 // 引入提示框和title组件,图例
 8 require(‘echarts/lib/component/tooltip‘)
 9 require(‘echarts/lib/component/title‘)
10 require(‘echarts/lib/component/legend‘)
11 require(‘echarts/lib/component/legendScroll‘)//图例滚动
12 //vue全局注入echarts
13 Vue.prototype.$echarts = echarts

使用它----在xx.vue文件中

    • 准备容器

      • <div id="myChart" :style="{width: ‘420px‘, height: ‘900px‘}"></div>
    • js代码
      •  1 //初始化echart对象
         2 let myChart = this.$echarts.init(document.getElementById(‘myChart‘));
         3 //配置echart
         4 myChart.setOption({
         5     grid: {//整体位置
         6         top: ‘40‘,
         7         right: ‘8%‘,
         8         left: ‘12%‘,
         9         bottom: 36,
        10     },
        11     backgroundColor: ‘#fff‘,
        12     xAxis: {
        13         type: ‘value‘,//类型--数值表
        14         position: ‘top‘,//位置
        15         boundaryGap : 0,//坐标轴两侧留白
        16         offset: 8,//X轴偏移
        17         axisLine : {//坐标轴轴线
        18             show: 0,
        19         },
        20         axisTick : {show: 0},//坐标轴刻度
        21         splitLine : {show: 0},//坐标轴grid区分割线
        22         data: [‘10‘, ‘20‘, ‘30‘, ‘40‘],//X轴刻度
        23     },
        24     yAxis: {
        25         type: ‘category‘,//类型--类目表
        26         name:‘期数‘,
        27         nameLocation: ‘start‘, //轴名位置
        28         nameTextStyle: {//Y轴名称
        29             color: ‘#f00‘,
        30         },
        31         offset: 8,//Y轴偏移
        32         nameGap: 15,//轴名距离
        33         inverse: 1,//反转
        34         boundaryGap : 0,//坐标轴两侧留白
        35         axisLine : {show: 0},//坐标轴轴线
        36         axisTick : {show: 0},//坐标轴刻度
        37         splitLine : {//坐标轴grid区分割线
        38             show: 1,
        39             lineStyle:{
        40                 color: ‘#dcdcdc‘
        41             }
        42         },
        43         data: [1,2,3,4],//y轴刻度
        44     },
        45     series: [{
        46         data: [23,24,25,26],//数据--将按照类目表依次排列
        47         type: ‘line‘,//折线图
        48         label: {//标签
        49             show: 1,
        50             position: ‘insideTopLeft‘,
        51             distance: 12,
        52             color: ‘#000‘,
        53             fontSize: 14,
        54         },
        55         itemStyle:{//标记拐点颜色
        56             color: (param)=>{
        57                 return function(param){....}
        58             }
        59         },
        60         symbol: ‘circle‘,//标记-实心圆
        61         symbolSize: 10,//标记-大小
        62         lineStyle:{color:‘#ccc‘,},//line样式
        63     }]
        64 });
    • 上面的js代码可整合成函数,方便使用和重绘.重绘时,EChart会复用可用部分,使图形进行变化.
    • ECharts官网 https://www.echartsjs.com/option.html#title

原文地址:https://www.cnblogs.com/Vayne-N/p/11059759.html

时间: 2024-10-29 07:11:09

VUE项目中按需引入ECharts.js的相关文章

在vue项目中正确的引入jquery

<script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改. dependencies:{ "jquery":"^2.2.3" } 然后在命令行中cnpm install install jquery --save-dev

vue项目中引入Sass

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化

在vue项目中使用canvas-nest.js,报parameter 1 is not of type &#39;Element&#39;

canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<script src="dist/canvas-nest.js"></script>插入到body标签最下边即可. 在vue项目中,使用时配置 1 import CanvasNest from 'canvas-nest.js'; 2 3 const config = { //

解决vue项目中引入组件时出现的Module is not installed问题

如图,在vue项目中import自己定义的组件时,‘@api/table’出现下划线,ctrl+右键点击不会跳转到对应组件.鼠标移上去显示Module is not installed,多方查询后终于弄清楚了原因. 图中路径中有个@符号,这个符号是在build目录下的webpack.base.conf.js文件中定义的,代表当前项目的src目录. 之所以出现上述问题是因为在下图中的webpack中没有指定webpack 的配置文件,或者配置文件指定得不对.找到原因后解决方案就简单了,只需要将该配

Vue项目中遇到的一些问题总结

一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 changeOrigin:true, pathRewrite:{ '^/api':'' //这里理解为用api代替target中的地址 } } } 配置完后,请求依然报错,大致是https证书的问题 [HPM] Error occured while trying to proxy request /xxx/

如何在Vue项目中给路由跳转加上进度条

1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验.本篇文章就来教你如何在Vue项目中实现这样的进度条. 2.安装Nprogress 虽然我们也可以自己手动实现这样的功能,但是,nprogress.js已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦! npm inst

Vue 项目中使用 jsPlumb

jsPlumb 介绍 jsPlumb 是一个强大的 JavaScript 连线库,它可以将 html中 的元素用箭头.曲线.直线等连接起来,适用于开发 Web 上的图表.建模工具.流程图.关系图等. jsPlumb 参考网站 博客园:http://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral 官网:https://www.jsplumbtoolkit.com/ 安装 jsPlumb v

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网 可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种 方法一:简单粗暴法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 例如我现在选择三个图标 点击购物车,添加至项目 为了方便可以给项目起一个名字 选