初识 echarts
- 前言
- npm安装
- 常见错误
- 数据加载、更新
- dataset管理数据
- 结束
前言
大家好，我是yma16，本文分享vue2_echarts安装使用_入门
vue2项目初始化
要初始化Vue2项目，请按照以下步骤：
- 确保您已经安装了Node.js和npm。
- 打开终端并导航到要创建项目的目录。
- 运行以下命令来初始化项目：
npm init在初始化期间，您将被要求提供项目名称、版本号、描述等信息。您可以使用默认设置或根据需要进行更改。
- 运行以下命令来安装Vue和Vue CLI：
npm install vue vue-cli -g- 使用Vue CLI创建Vue项目：
vue init webpack <project-name>这将在当前目录下创建一个名为的新项目。
- 进入新创建的项目目录并安装依赖项：
cd <project-name>
npm install- 运行以下命令来启动本地开发服务器：
npm run devnpm安装
在vue的项目中使用npm安装
$ npm install echarts --save在main.js中导入echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
常见错误
Initialize failed: invalid dom dom没有初始化，echart的实例执行早了，可以先初始化dom然后在函数中调用echart实例。
例：使用echart制作一个柱状图
vue声明方法
methods: {
echartfunc: function (o) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("echart2"));
// 绘制图表
myChart.setOption({
title: {
text: "ECharts 柱状图测试",
},
tooltip: {},
xAxis: {
data: ["yma16","法外狂徒", "张三", "李四", "maletingda", "echart"],
},
yAxis: {},
series: [
{
name: "体重",
type: "bar",
data: [45, 50, 48, 43, 60, 65],
},
],
});
}
}vue的template模板中
<button @click="echartfunc">测试柱状图</button>
<div
id="echart2" style="width: 1920px; height: 600px; background-color: bisque" >
</div>效果
数据加载、更新
思考：数据加载通过setOption
更新：使用setTimeOut不断循环调用echart的setOption达到循环渲染的效果。
例：柱状图添加数据
函数声明
export default {
name: "echart01",
data() {
return {
data:{
x:["yma16","法外狂徒", "张三", "李四", "maletingda", "echart"],
y:[45, 50, 48, 43, 60, 65]
},
msg: "echart 柱状图测试",
insert_x:'',//插入横坐标 数据 使用
insert_y:''
};
},
methods: {
insert:function(){
this.data.x.push(this.insert_x);
this.data.y.push(this.insert_y);
console.log(this.data)
setTimeout(this.update,1000);//1s刷新一次
},
update:function(){
setTimeout(this.echartfunc,1000);//1s刷新一次
},
echartfunc: function (o) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("echart2"));
// 绘制图表
myChart.setOption({
title: {
text: "ECharts 柱状图测试",
},
tooltip: {},
xAxis: {
data: ["yma16","法外狂徒", "张三", "李四", "maletingda", "echart"],
},
yAxis: {},
series: [
{
name: "体重",
type: "bar",
data: [45, 50, 48, 43, 60, 65],
},
],
});
}
}效果
dataset管理数据
dataset支持单独的数据集声明，数据被多个组件复用，利于数据的输入
对比
- 旧版本数据声明，数据分散
option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
}- dataset，数据合并
var option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}对象数组格式
option = {
legend: {},
tooltip: {},
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，
// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
效果
结束
本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！
