//步驟一：創(chuàng)一個div標簽內(nèi)綁定id為mian坷牛；
<div id="main"></div>
//步驟二：methods創(chuàng)建drawChart（）方法
methods: {
? ? ? drawChart() {
? ? ? ? // 基于準備好的dom铣揉，初始化echarts實例
? ? ? ? let myChart = this.$echarts.init(document.getElementById("main"));
? ? ? ? // 自定義一個顏色
? ? ? ? var color2 = new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
? ? ? ? ? ? offset: 0,
? ? ? ? ? ? color: "#2dcab1",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? offset: 1,
? ? ? ? ? ? color: "#3fb3f2",
? ? ? ? ? },
? ? ? ? ]);
? ? ? ? // 指定圖表的配置項和數(shù)據(jù)
? ? ? ? let option = {
? ? ? ? ? tooltip: { //鼠標 觸摸上顯示數(shù)據(jù)提示
? ? ? ? ? ? trigger: 'item'
? ? ? ? ? },
? ? ? ? ? title: {?//設(shè)置標題
? ? ? ? ? ? text: "總產(chǎn)值年度趨勢",
? ? ? ? ? ? left: "left",
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? fontSize: 12,
? ? ? ? ? ? ? fontWeight: 'bolder',
? ? ? ? ? ? ? color: '#00D8FFFF' // 主標題文字顏色
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? xAxis: { //x軸設(shè)置?
? ? ? ? ? ? type: 'category',
? ? ? ? ? ? data: ['2017', '2018', '2019', ],
? ? ? ? ? ? axisLabel: { ?//x軸 值的字體樣式
? ? ? ? ? ? ? color: "#fff",
? ? ? ? ? ? ? fontSize: "12",
? ? ? ? ? ? ? interval: 0,
? ? ? ? ? ? },
? ? ? ? ? ? axisLine: { //x軸 線的樣式
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? color: "rgba(14,79,173,0.62)",
? ? ? ? ? ? ? ? width: 1,
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? axisTick: {
? ? ? ? ? ? ? show: false,
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? grid: { //柱狀圖表設(shè)置距離容器上下左右的距離
? ? ? ? ? ? left: "5",
? ? ? ? ? ? right: "5",
? ? ? ? ? ? bottom: "0",
? ? ? ? ? ? top: "38",
? ? ? ? ? ? containLabel: true,
? ? ? ? ? },
? ? ? ? ? yAxis: { //y軸設(shè)置
? ? ? ? ? ? name: "(萬元)",
? ? ? ? ? ? type: 'value',
? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? color: "#fff",
? ? ? ? ? ? ? fontSize: "10",
? ? ? ? ? ? ? interval: 0,
? ? ? ? ? ? },
? ? ? ? ? ? axisLine: {
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? color: "rgba(14,79,173,0.62)",
? ? ? ? ? ? ? ? width: 1,
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? axisTick: {
? ? ? ? ? ? ? show: false,
? ? ? ? ? ? },
? ? ? ? ? ? splitLine: { //y軸網(wǎng)格線的顏色的設(shè)置
? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? color: "rgba(60,133,228,0.2)",
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? nameTextStyle: { //單位的設(shè)置
? ? ? ? ? ? ? color: "#fff",
? ? ? ? ? ? ? fontSize: "10",
? ? ? ? ? ? ? padding: [0, 0, -8, -20],
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? series: [{
? ? ? ? ? ? name: '訪問來源',
? ? ? ? ? ? data: [20, 26, 30],
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? barWidth: 10,//柱的寬度
? ? ? ? ? ? showBackground: false,
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? color: color2,//使用了自定義的漸變色
? ? ? ? ? ? ? barBorderRadius: 0,
? ? ? ? ? ? },
? ? ? ? ? }]
? ? ? ? };
? ? ? ? // 使用剛指定的配置項和數(shù)據(jù)顯示圖表伐谈。
? ? ? ? myChart.setOption(option);
? ? ? }
? ? },
//最后在 mounted調(diào)用
mounted() {? ? ? this.drawChart();
? ? }
