vue使用Echarts vue使用Echarts滾動條
最近公司一個項目需要繪製圖標,數據很多都要放在一張圖標上面,說起圖標肯定先想到Echarts , 剛好Echarts也配置了滾動條.下面分享一下
github:
loever/vueEcharts
npm安裝:
npm install echarts -S
main.js 配置:
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
項目中:引入:
let echarts = require(echarts/lib/echarts)
這樣全局引入 打包 項目會很大;
可以再demo里單獨引入:需要哪個模塊引入哪個模塊
require(echarts/lib/chart/bar)
require(echarts/lib/component/tooltip)
require(echarts/lib/component/title)
require(echarts/lib/component/dataZoom)
require(echarts/lib/component/dataset)
Echarts:色彩包
import macarons from echarts/theme/macarons
項目中
script>
let echarts = require(echarts/lib/echarts)
export default {
name: hello,
data() {
return {
data: []
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基於準備好的dom，初始化echarts實例
let myChart = this.$echarts.init(document.getElementById(myChart))
// 繪製圖表
myChart.setOption({
tooltip: {
trigger: axis,
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: shadow // 默認為直線，可選為：line | shadow
}
},
legend: {
data: [直接訪問, 郵件營銷, 聯盟廣告, 視頻廣告, 搜索引擎, 百度, 谷歌, 必應, 其他]
},
toolbox: {
show: true,
orient: vertical,
x: right,
y: center,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: [line, bar, stack, tiled]
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: category,
data: [周一, 周二, 周三, 周四, 周五, 周六, 周日]
}],
yAxis: [{
type: value
}],
series: this.data, // 這裡就放後台傳過來的數據
dataZoom: [{ // 這是滾動條插件 可以是Y軸 也可以是X軸
type: inside,
start: 0,
end: 20
},
{
start: 0,
end: 20, //位置 下面這個是 自定義圖標 格式可以是base64 url inco 格式
handleIcon: d="M625.353 69.801L844.722 343.814c0 0 11.085 102.239-87.737 59.17-57.017-25.586-77.367-79.29799999-77.367-79.298l-2.043 417.39c0 0-58.947 87.901-110.234 0l-0.934-264.25399999c0 0-63.75 86.74199999-138.747-6.064 0 0-56.248 94.518-135.27-4.57700001 0 0-56.03 109.298-112.278-9.485l0-331.75c0 0 3.25599999-25.862 48.862-55.145L625.353 69.801 625.353 69.801zM625.353 69.801",
handleSize: 80%, // 圖標大小
handleStyle: { // 圖標樣式
color: #fff,
shadowBlur: 3,
shadowOffsetX: 4,
shadowOffsetY: 2,
transform: "rolate(90deg)" // 圖標旋轉
}
}
],
});
}
},
created() {
// 在created 裡面 直接調用 this.drawLine(); 回報這個錯誤 因為這裡時候echarts還沒有載入出來 created hook: "TypeError: Cannot read property getAttribute of null"
/* axios.post(*********, ).then(res => { */
var arr = [] // 在這裡把數據過濾成Ehcarts 需要的格式
for (var i = 0; i < 10; i++) {
var json = {
name: 視頻廣告 + i,
type: bar,
stack: 廣告,
data: [150 + i, 2 - i, 20 * i, 154 - 100, 19 - 8, 30, 40]
}
arr.push(json)
}
this.data = arr
// 主要 echarts不能v-if 也會報錯
// this.drawLine(); axios 裡面必須在調用一次 不然回報錯 created hook: "TypeError: Cannot read property getAttribute of null"
/* }) */
}
}
</script>
推薦閱讀：
