使用方法:1、用「yarn add echarts」或「npm install echarts -S」或「cnpm install echarts -S」指令安裝Echarts;2、在main.js中用「import echarts from ' echarts' Vue.prototype.$echarts = echarts」進行引入;3、在vue頁中呼叫相關api即可。
本教學操作環境:windows7系統、vue3版,DELL G3電腦。
Echarts 商業級資料圖表,它是一個純JavaScript的圖標庫,兼容絕大部分的瀏覽器,底層依賴輕量級的canvas類庫ZRender,提供直觀,生動,可交互,可高度個性化客製化的數據視覺化圖表。創新的拖曳重運算、資料視圖、值域漫遊等特性大大增強了使用者體驗,賦予了使用者對資料進行挖掘、整合的能力。
Echarts,它是一個與框架無關的 JS 圖表庫,但是它基於Js,這樣很多框架都能使用它,例如Vue。
以下幾種安裝方式擇其一
本專案安裝的是所採用的yarn
, echarts
版本號碼是4.8.0
// yarn yarn add echarts // npm npm install echarts -S // cnpm cnpm install echarts -S
在main.js中
import echarts from 'echarts' Vue.prototype.$echarts = echarts
到了這一步驟說明你已經把準備工作做完了
我們先把頁面上其他不需要用到的程式碼給清除吧<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
建立一個id 為 | EChart | 的div 作為容器(使用id會有個小問題,在最後解答)<div id="EChart" style="width: 300px; height: 300px;"></div> |
---|---|---|
|
getRenderer() { console.log(this.$echarts); // 基于准备好的dom,初始化echarts实例 let EChart = this.$echarts.init(document.getElementById("EChart")); // 配置参数 let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }; // 设置参数 EChart.setOption(config); }, |
|
|
mounted() { // 在生命周期中调用 getRenderer 方法 this.getRenderer(); }, |
請看大螢幕 |
|
吃瓜群眾:「這特麼不是官方範例麼?能不能炫一點」 | 嚴老師:「說實話確實有點low ,不要慌這才哪到哪呢,我們先從基礎講堂開始嘛」 |
先去了解其參數 |
||
先整點簡單、常用的來看看(備註裡面皆是對應API 地址) |
參數名稱 | |
備註 |
掰扯了这么多,估计大家心里也没个底,实战一下吧
来吧!!展示
修改折线图,复制上面的config
代码
只用修改一处地方,那就是series
中的type
属性为line
即可
let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "line", data: [5, 20, 36, 10, 10, 20], }, ], };
饼状图,我们也来看看,将type
修改为pie
当然我们需要把多余的X轴Y轴
配置删除咯,data数据格式也需要修改一下
let config = { tooltip: {}, legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };
仪表盘将 type
修改为 gauge
let config = { series: [ { name: "销量", type: "gauge", data: [50], }, ], };
嗯~ 看起来有那么一点味道了
let config = { series: [ { name: "销量", type: "funnel", data: [ {value: 60, name: '访问'}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] }, ], };
哈哈哈 倒三角就是老严的脸了 (脑补一下下)
刚刚其实我们已经用到了这个参数噢 ps:饼状图
legend
可以作为图表的标记或颜色的名称描述(专业名词:图例)
它的type有两个参数plain || scroll
默认为plain
当图表内容比较丰富的时候可以使用 scroll
可以带有滚动操作
都说颜色是Web的灵魂所在,每一个人都是画手
官方默认配色 :
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
我们也可以自己修改颜色,规则是按数据对应的index
找color
颜色
例如这样:
let config = { color:["red","blue","yellow"], legend:{ data : ["严","老","湿"] }, series: [ { name: "销量", type: "pie", data: [ {value:20,name:"严"}, {value:10,name:"老"}, {value:15,name:"湿"} ], }, ], };
我们还是以线条为参考8
先看看基础篇,我们在y轴声明了一个name
let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"销量", type: 'value' }], series: [{ name:'销量', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] };
但是有时候呢,我们会根据需求,要做一个双Y轴,顾名思义双Y轴,在加一个Y轴就好了
let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }
x轴与y轴基本同理,直接改成数组就成为双x轴了
let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] };
到了上面基础篇也就差不多了
其实我们讲了这么多,我们梳理梳理最开始的问题
id重名怎么办?
数据多个渲染怎么办?
答案:使用ref,因为vue是单页面,使用id出现 重名会导致渲染问题
具体怎么使用我们来看看
<div ref="EChart" style="width: 300px; height: 300px;"></div>
// 同样的初始化参数 但是我们此次使用的是ref let EChart = this.$echarts.init(this.$refs.EChart) // 配置参数 let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }; // 设置参数 EChart.setOption(config);
相关推荐:vue.js视频教程
以上是vue專案中怎麼用echarts的詳細內容。更多資訊請關注PHP中文網其他相關文章!