Vue怎么使用Echarts创建图表

摘要：后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址如下：，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。

本文流程：

插件→2.引入Echarts→3.创建图表→4.修改样式→5.接入数据

一.安装插件

方法一：npm安装Echarts

npm echarts -S

方法二：cnpm安装Echarts

npm -g cnpm --registry=https://registry.npm.taobao.org

cnpm echarts -S

二.引入Echarts

方法一：全局引入

文件引入Echarts

import echarts from 'echarts'

添加到vue的原型上，这样就可以全局使用了

Vue.prototype.$echarts = echarts

方法二：局部引入

提示框和title组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title')

中查找文件位置进行引入

三.创建图表

插件和在页面里面引入图表之后，那么恭喜你可以创建图表了~

：你首先得创造一个图表的容器，宽高必须是行内样式，单位必须是px

：这样会出现一个问题，因为由于必须固定好宽高，你缩小屏幕的时候，图表不会随之适应的缩小，刷新页面才能适应，解决方法的实现请接着往下看

：绘制图表，这里我们要注意，echarts初始化应在钩子函数中，挂载之后调用

：

：省略处为绘制图表的代码，首先，你你项目里面需要用到的（样式差不多就行，下文会教你如何修改图表样式），点进去，然后你可以看到代码，把option = {}括号里面的内容代码处，运行，你页面即可以看到你所需要的图表；

：下方代码防止越界，重汇canvas处，即为可以解决掉屏幕缩小，图表不会随之适应的缩小的方法，原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas

window.onresize =

四.修改样式

修改图表样式，现在我从图表的左上角说到右下角，如何去更改图表样式，首先先上两张图表的差异图：

修改过的柱形图：

修改样式之后的柱形图：

修改方法：

'降水量'], left: '75%', top: 12px, itemWidth: 10, itemHeight: 10, '#878787',文字的具体的颜色

Box: { show : ,显示 ,type: ['line','bar' right: '6%', },

修改：

'category''1月','2月','3月','4月','5月'], splitLine: {show: },去除网格分割线 axisLine: { 'solid''#d8d8d8', width:'1' show: 不显示刻度线 '#878787',

修改：

'单位：次',显示,也可不写 max: 30, type: 'value' show: show: '#878787', 5, '#f6f6f6'],

修改：

'数量', data: [200,300,400,350,100], type: 'bar', '#FD6B71', ,显示值 position: 'top',显示 '#FD6B71' 15 }],

代码我也发一份，当你安装好插件和全局引入后，你可以用以下代码进行测试有没有成功，代码如下：

我的业绩

    }
},mounted(){
    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;this</span><span style="background-color: #f5f5f5; color: #000000;"&gt;.drawLine();
},methods: {
    drawLine(){
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; myChart </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;this</span><span style="background-color: #f5f5f5; color: #000000;"&gt;.$echarts.init(document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;myChart</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;));</span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>容器元素</span>
        <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; option </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; {
            tooltip : {
                trigger: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;axis</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;
            },grid: {
                left: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;6%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,right: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;6%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,bottom: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;6%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,containLabel: </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;true</span><span style="background-color: #f5f5f5; color: #000000;"&gt;
            },legend: {
                data:[</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;订单<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a></span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;我的业绩</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;],left: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;6%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,top: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;top</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,itemWidth: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;15</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;图例图标的宽</span>

itemHeight: 15,//图例图标的高
 textStyle: {
color: '#3a6186',fontSize:20,}
},toolBox: {
show : true,feature : {
magicType : {show: true,type: ['line','bar']},calculable : true,xAxis : [
{
type : 'category',data : ['01-01','01-02','01-03','01-04','01-05','01-06','01-07'],splitLine: {show: false},//去除网格分割线
 axisTick: {//刻度
 show: false//不显示刻度线
 },axisLine: {//坐标线
 lineStyle: {
type: 'solid',color: '#e7e7e7',//轴线的颜色
 width:'2'//坐标线的宽度
 }
},axisLabel: {
textStyle: {
color: '#3a6186',//坐标值的具体的颜色
 }
},splitLine: {
show: false//去掉分割线
 },}
],yAxis : [
{
type : 'value',axisLine: {//线
 show: false
},axisTick: {//刻度
 show: false
},splitLine: {
lineStyle: {
color: ['#e7e7e7'],//分割线的颜色
 }
}
}
],series : [
{
name:'订单数量',type:'bar',barWidth: 20,data:[20,35,55,60,120,150,140],itemStyle: {
normal: {
color: '#00abf7',//设置柱子颜色
 label: {
show: true,//柱子上显示值
 position: 'top',//值在柱子上方显示
 textStyle: {
color: '#00abf7',//值的颜色
 fontSize:16,}
}
}
},{
name:'我的业绩',data:[40,50,90,110,130,160,150],itemStyle: {
normal: {
color: '#ff4f76',//值在柱子上方显示
 textStyle: {
color: '#ff4f76',}
]
};
//防止越界，重绘canvas
 window.onresize = myChart.resize;
myChart.setOption(option);//设置option
 }
}
}
</script>

五.接入数据

调用接口，把接口数据替换掉之前写死的数据即可，比如：

'POST'=>获取数据 .draw= }).(err =>

总结：博客进行评价，一起学习，一起成长，有什么问题欢迎留言，我将第一时间更改，也谢谢大家能阅读到这里，你们的支持是我前进的动力！

原文链接：https://www.f2er.com/vue/74418.html

Vue怎么使用Echarts创建图表

猜你在找的Vue相关文章