vue项目中使用echarts
vue项目中使用echarts
·
第一步、安装
cnpm install echarts --save
第二步、引入
2.引入到项目中
2.1 全局引入 (在main.js中引入)
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
直接绑定在vue实例上,在任何组件中,直接 this.$echarts 即可使用
2.2局部引入(在所需页面引入)
import echarts from 'echarts'
第三步、初始化echarts
3.1 你需要echarts的页面中得创建一个dom元素
<div id="myCharts" ref="myCharts"></div>
3.2 在mounted中初始化echarts ( 以下例子为折线图
)
mounted(){
//使用init初始化
1. const myCharts = this.$echarts.init(this.$refs.myCharts);
2. let options = {
title: {
text: '过去某周气温变化', //图表顶部的标题
},
tooltip: { //鼠标悬浮框的提示文字
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
xAxis : [{ //x轴坐标数据
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}],
yAxis : [{ //y轴坐标数据
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}],
series: [ //驱动图表生成的数据内容数组,几条折现,数组中就会有几个对应对象,来表示对应的折线
{
name:"最高气温",
type: "line", //pie->饼状图 line->折线图 bar->柱状图
data:[11, 11, 15, 13, 12, 13, 10],
},
{
name:"最低气温",
type: "line", //pie->饼状图 line->折线图 bar->柱状图
data:[1, -2, 2, 5, 3, 2, 0],
}
]}
3. myCharts.setOption(options);
}
ok ,这样就成功的实现了 echarts,更多方法还请参考官方网站
更多推荐
已为社区贡献1条内容
所有评论(0)