文章目錄
- 前言
- 解決方法
- 酷炫Echarts官方實體(可直接使用)
- 1. 大資料量面積圖
- 2. 桑基圖層級定義樣式
- 關系圖
前言
這是之前寫的一個博客
我發現之前寫的是真的爛，太Low了， 最近才稍微會點咋用，我還是這么菜…
官方給的稍微高級點的案例，我發現放到我的頁面上運行，就是一片空白…
我發現真的很難找到，怎么開發出官方給的這種稍微高級點的，關于Echarts的案例大多是一些簡單的折線圖，扇形圖，條形統計圖啥的，但是怎么搞一個更加酷炫的圖呢？比如說下面的：
我每次看官方檔案的時候（新手,真的看不懂官方怎么用的，高手看到了輕點噴），都是帶著這種疑問：（我開發用的是IDE，Vue框架）
- 我這些變數都應該放到哪里？？？
- 這個“option && myChart.setOption(option);到底啥意思…
每次稍微用高級一點的圖，代碼一個錯都不報，但是Echarts在頁面里面就是空白！！
解決方法
我這里先直接放上用Vue 寫出來的高級的東西，也是官方檔案，注意看變數定義應該放到哪里，
- myChart的相關配置（option內部引數）應該放到 mouted函式里面，
- 注意用’import * as echarts from ‘echarts’;'引入，且在vue的
<script>標簽下面，
exprot default之前定義，同時這里定義陣列，變數，間隔控制，亂數產生
<template>
<div id="ttt" style="width: 1500px;height: 500px">
Hello vue!
</div>
</template>
<script>
import * as echarts from 'echarts';
// prettier-ignore
// Generate data
let category = [];
let dottedBase = +new Date();
let lineData = [];
let barData = [];
for (let i = 0; i < 20; i++) {
let date = new Date((dottedBase += 3600 * 24 * 1000));
category.push(
[date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
);
let b = Math.random() * 200;
let d = Math.random() * 200;
barData.push(b);
lineData.push(d + b);
}
export default {
name: "suanfa",
data() {
return {
chart:null,
option:Object,
count:11
}
},
methods: {
},
created() { /*配置專案設定*/
},mounted() {
/*初始化Echarts*/
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('ttt'));
// 繪制圖表
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.setOption({
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData
},
{
name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' }
])
},
data: barData
},
{
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
{ offset: 1, color: 'rgba(20,200,212,0)' }
])
},
z: -12,
data: lineData
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f375f'
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData
}
]
/*mowei*/
});
},
}
</script>
<style scoped>
</style>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
············································································································································
下面給出另外幾個好看點的Echarts實體：
酷炫Echarts官方實體(可直接使用)
1. 大資料量面積圖
<template>
<div id="ttt" style="width: 1500px;height: 500px">
Hello vue!
</div>
</template>
<script>
import * as echarts from 'echarts';
let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
export default {
name: "suanfa",
data() {
return {
chart:null,
option:Object,
count:11
}
},
methods: {
},
created() { /*配置專案設定*/
},mounted() {
/*初始化Echarts*/
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('ttt'));
// 繪制圖表
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.setOption({
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: 'Large Area Chart'
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 10
},
{
start: 0,
end: 10
}
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: data
}
]
/*mowei*/
});
},
}
</script>
<style scoped>
</style>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
2. 桑基圖層級定義樣式
<template>
<div id="ttt" style="width: 1500px;height: 500px">
Hello vue!
</div>
</template>
<script>
import * as echarts from 'echarts';
let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
var ROOT_PATH =
'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
export default {
name: "suanfa",
data() {
return {
chart:null,
option:Object,
count:11
}
},
methods: {
},
created() { /*配置專案設定*/
},mounted() {
/*初始化Echarts*/
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('ttt'));
// 繪制圖表
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/product.json', function (data) {
myChart.hideLoading();
myChart.setOption({
title: {
text: 'Sankey Diagram'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: data.nodes,
links: data.links,
emphasis: {
focus: 'adjacency'
},
levels: [
{
depth: 0,
itemStyle: {
color: '#fbb4ae'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
},
{
depth: 1,
itemStyle: {
color: '#b3cde3'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
},
{
depth: 2,
itemStyle: {
color: '#ccebc5'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
},
{
depth: 3,
itemStyle: {
color: '#decbe4'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}
],
lineStyle: {
curveness: 0.5
}
}
]
})
/*畫圖末尾*/
})
}
}
</script>
<style scoped>
</style>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
關系圖
<template>
<div id="ball" style="width: 1500px;height: 500px">
Hello vue!
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "suanfa",
data() {
return {
}
},
methods: {
},
created() { /*配置專案設定*/
},mounted() {
var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var chartDom = document.getElementById('ball');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/webkit-dep.json', function (webkitDep) {
myChart.hideLoading();
option = {
legend: {
data: ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other']
},
series: [
{
type: 'graph',
layout: 'force',
animation: false,
label: {
position: 'right',
formatter: '{b}'
},
draggable: true,
data: webkitDep.nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: webkitDep.categories,
force: {
edgeLength: 5,
repulsion: 20,
gravity: 0.2
},
edges: webkitDep.links
}
]
};
myChart.setOption(option);
});
}
}
</script>
<style scoped>
#ball{
width: 1000px;
height:1500px;
}
</style>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
方法掌握了后面實作就是照貓畫虎…
最后放上一張我自己寫的資料分析內容：
上面這張圖敲了我整整1000行…
沒想到上榜了,紀念一下…
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/375801.html
標籤：其他
上一篇：hadoop環境搭建(一)補充