echarts基本使用 (包括在vue中使用echarts)
echarts基本使用(包括在vue中使用echarts)概念:用较少的代码实现比较酷炫的数据统计表.这也是一款基于HTML5的图形库。图形的创建也比较简单,直接引用Javascript即可。优点:一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 4;第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易;第三点是这个库支持的图形很丰富,...
·
echarts基本使用(包括在vue中使用echarts)
- 概念:用较少的代码实现比较酷炫的数据统计表.
- 这也是一款基于HTML5的图形库。图形的创建也比较简单,直接引用Javascript即可。优点:一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 4;第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易;第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便。
使用步骤:
- 第一步:引用Js文件
<script type="text/javascript" src="js/echarts.js"></script>
- 第二步:准备一个放图表的容器(画布)必须指定高度,否则不会显示
<div id="chartmain" style="width:600px; height: 400px;"></div>
- 第三步:echarts.init(dom容器),初始化echarts实例,一般放在最后(定义)
var myChart = echarts.init(document.getElementById('chartmain'));
- 第四步: 使用制定的配置项和数据显示图表,这两步都放在最后(显示)
myChart.setOption(option);
- 第五步:设置参数。(使用)
完整代码案例:
<script type="text/javascript"> //指定图标的配置和数据 var option = { title:{ text:'ECharts 数据统计' }, tooltip:{}, legend:{ data:['用户来源'] }, xAxis:{ data:["Android","IOS","PC","Ohter"] }, yAxis:{ }, series:[{ name:'访问量', type:'line', data:[500,200,360,100] }] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('chartmain')); //使用制定的配置项和数据显示图表 myChart.setOption(option); </script>
效果展示:
柱状图其实也很简单,只要修改一个参数就可以了。把series里的type 值修改为”bar”
饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标,数据绑定上也是采用value 和name对应的形式。- 第一步:引用Js文件
var option = {
title:{
text:'ECharts 数据统计'
},
series:[{
name:'访问量',
type:'pie',
radius:'60%',
data:[
{value:500,name:'Android'},
{value:200,name:'IOS'},
{value:360,name:'PC'},
{value:100,name:'Ohter'}
]
}]
};
效果:
在vue项目中使用echarts
vue项目是使用 vue-cli 脚手架搭建
步骤:
- 第一步:安装echarts依赖
npm install echarts -S
使用淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
- 第二步:引入echarts,可全局引入和按需引入
全局引入
- main.js
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
- Hello.vue
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.drawLine(); // 初始化 }, methods: { drawLine(){ // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } }
这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用
- 按需引入
- Hello.vue
// 引入基本模板 let echarts = require('echarts/lib/echarts') // 引入柱状图组件 require('echarts/lib/chart/bar') // 引入提示框和title组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') export default { name: 'hello', data() { return { msg: 'Welcome to Your Vue.js App' } }, mounted() { this.drawLine(); //初始化 }, methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } }
- Hello.vue
在项目中使用时的案例:- 第一步:安装echarts依赖
<template>
<div id="chart" ref="chart"></div> //画布
</template>
<script>
import echarts from "echarts"; //引入echarts
export default {
data() {
return {
};
},
created() {},
mounted() {
this.$nextTick(() => { //初始化
this.initChart();
this.getChartData();
window.addEventListener("resize", () => {
this.resize(); //监听屏幕大小,来刷新画布
});
});
},
methods: {
//查询图表数据 动态的改变数据
getChartData() {
// this.chart.setOption({
// xAxis: {
// data: this.xAxisdata
// },
// series: {
// data: this.seriesdata
// }
// });
this.chart.hideLoading();
},
//初始化图表
initChart() {
let option = {
title: {
},
tooltip: {
trigger: "axis",
formatter: "时间 : {b}<br />压力:{c}Mpa",
axisPointer: {
type: "line" // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["13:20", "13:30", "13:40", "13:50", "13:60", "13:70", "13:80", "13:90", "13:100", "13:110"]
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}"
}
},
series: [
{
name: "压力",
type: "line",
symbol:"circle",
symbolSize:[8,8],
itemStyle:{color:"#43B9E1"},
lineStyle:{
color:"#43B9E1"
},
data: [8,
{
value : 6,
label: {
show:true,
formatter:"充装开始",
fontSize:"18"
},
symbol:"roundRect",
symbolSize:[8,16],
itemStyle:{
color:"#FB9B00"
}
},
7,13,18,
{
<!--为某一点的数据做样式-->
value : 19,
symbol:"roundRect",
symbolSize:[8,16],
label: {
show:true,
formatter:"充装结束",
fontSize:"18"
},
itemStyle:{
color:"#3FC7C5"
}
},
12, 11,10,9
],
},
]
};
this.chart = echarts.init(this.$refs.chart); //定义
this.chart.showLoading(); //等待的显示
this.chart.setOption(option); //展示
this.chart.resize(); //刷新画布
},
resize() {
if (this.chart) {
this.chart.resize();
}
}
},
computed: {},
watch: {}
};
</script>
<style scoped>
#chart {
width: 100%;
height: 400px;
}
</style>
更多推荐
已为社区贡献14条内容
所有评论(0)