Vue怎么使用Echarts创建图表

摘要：，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。

本文流程：

一.安装插件

npm echarts -S

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

cnpm echarts -S

二.引入Echarts

文件引入Echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

中查找文件位置进行引入

三.创建图表

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

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

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

：

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

：下方代码防止越界，重汇canvas处，即为可以，原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas

window.onresize =

四.修改样式

'降水量'], left: '75%', top: 12px, itemWidth: 10, itemHeight: 10, '#878787',

, ,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;获取容器元素</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;订单数量</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 =>

总结：

Vue怎么使用Echarts创建图表

相关推荐